When you set the height of a page element to 100%, it is expected that the element will fill the height of the entire browser window, but in most cases, this approach has no effect. Do you know why height: 100% doesn't work?
According to common sense, when we use the height attribute of CSS to define the height of an element, the element should expand the corresponding space distance in the vertical space of the browser according to the setting. For example, if the CSS of a div element is height: 100px, then It should fill 100px of vertical space on the page.
In accordance with the W3C specification, the percentage height needs to be set according to the height of the parent element container of this element. So, if you set the height of a div to height: 50% and its parent element is 100px high, then the div's height should be 50px.
Then why height: 100%; doesn't work?
When designing a page, you place a div element inside, and you want it to occupy the entire height of the window. The most natural way is to add the css attribute of height: 100%; to this div. However, if you set the width to width: 100%; then the element's width will immediately expand to the full horizontal width of the window. Will the height be the same?
wrong!
To understand why not, you need to understand how browsers calculate height and width. Web browsers take into account the open width of the browser window when calculating the effective width. If you don't set any default value for the width, the browser will automatically tile the page content to fill the entire horizontal width.
But the calculation of height is completely different. In fact, the browser doesn't calculate the height of the content at all, unless the content exceeds the viewport (causing scroll bars to appear). Or you set an absolute height for the entire page. Otherwise, the browser will simply let the content pile down, and the height of the page doesn't need to be considered at all.
Because the page does not have a default height value, when you set the height of an element to a percentage height, you cannot calculate your own height based on the height of the parent element. In other words, the height of the parent element is just a default value: height: auto;. undefinedYou can only get results when you ask the browser to calculate the percentage height based on such a default value . That is, a null value, the browser will not have any response to this value.
Well, if you want an element's percentage height height: 100%;to work, you need to set a valid value for the height of all of the element's parent elements. In other words, you need to do this:
<html>
<body>
<div style="height:100%;">
<p>I want this div to have a height of 100%. </p>
</div>
</body>
</html>
Now you have given this diva height of 100% and it has two parent elements <body>and <html>. In order for your div's percentage height to work, you have to set the <body>sum <html>of the heights
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>The height of this div will be 100%</p>
</div>
</body>
</html>
As you can see from this demo, it height: 100%;works.
height: 100%;Some things to pay attention to when using
1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
（来自：http://t.cn/RzaYuxD）