按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。
而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。
那为什么 height:100%; 不起作用？
首先：
你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，高度为：auto;会根据内容的高度逐步往下堆叠。
因为页面的高度值为:auto，所以，当你让一个元素的高度设定为百分比高度时，那么0px*100%=0px。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
所以，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值：
<html>
<head>
.....
<style type="text/css">
html,body{height:100%;}
div{ height:100%;}
</style>
</head>
<body>
<div></div>
</body>
</html>
height: 100%;起作用了。
网友评论