当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？

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

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。

方法就是在css当中增加上：

html, body{ margin:0; height:100%; }

这样，在div中使用height:100%就能够正常显示了。

DIV高度100%无效原因

付费节点推荐