What does it mean to give a div a style='height:100%'?
css, html
Solution
100% of the parent container's height.
See here: http://jsfiddle.net/6VRn6/
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
When you don't specify a `html` or `body` height, their heights are the sum of the heights of the elements in it.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The `body` height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
Problem
There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say: ``` <div style='height:100%'> ``` How high is 100%? 100% of what? [EDIT] Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.