首先要了解浏览器是如何计算高度和宽度的。
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算就完全不同了，事实上，浏览器根本就不计算内容的高度，除非内容超出了视口（出现滚动条），或者你给父级设定了高度。否则，浏览器就会让内容简单的往下堆砌，页面的高度根本就不会考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
所以，当我们不给父级设置高度时，子元素的height：100%并不会起作用。
所以要使子元素的height:100%起作用，就要这样：
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
这样这个div的高度就会100%了
</p>
</div>
</body>
</html>还有一些使用height:100%的注意事项：
1、height:100%的时候，可能会因为margin、padding、border属性造成出现滚动条，可能不是你预期。
2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
