问题
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.
回答1:
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.
回答2:
100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.
回答3:
The height:100% means : Make that div big as the parent!
回答4:
It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:
{--parent loop
{
..height 100% of above loop
..
}
}
来源：https://stackoverflow.com/questions/11159652/what-does-it-mean-to-give-a-div-a-style-height100