CODEWITHSUNDEEP
htmlcss
user1807782
user1807782

Reputation: 461

Why isn't this 100% height working?

CSS

html { height: 100%; }

body { min-height: 100%; margin: 0; }

#test { height: 100%;  background: red; width: 50px; }

HTML

<div id="test">test</div>

http://jsfiddle.net/k176a1xc/1/

Why doesn't #test have a 100% height?

Upvotes: 0

Views: 166

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

Because body min-height should be defined as height :

body {
    height: 100%;
    margin: 0;
}

forked fiddle -> http://jsfiddle.net/p7vn7vrj/
The body min-height percentage is a min-height of "nothing", because there is no height to calculate the min-height percentage against. Therefore #test height will be the same as body min-height, which is not set.

the CSS hierarchy is

height 
   min-height
   max-height
     height (child)
       min-height
       max-height

and so on

Upvotes: 1

Related Questions