如何让 height:100%; 起作用

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。

那为什么 height:100%; 不起作用？

首先：

你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，高度为：auto;会根据内容的高度逐步往下堆叠。

因为页面的高度值为:auto，所以，当你让一个元素的高度设定为百分比高度时，那么0px*100%=0px。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

所以，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值：

   

.....

 

 

     

 

height: 100%;起作用了。