- ·上一篇文章:web app变革之 – CSS3 rem
- ·下一篇文章:CSS3渐变使用方法
当前位置:K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
DIV高度100%无效原因
-->
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么
1 | height:100% |
不起作用吗?
按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个
1 | div |
元素的CSS是
1 | height: 100px; |
,那它应该在页面的竖向空间里占满100px的高度。
而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个
1 div的高度设定为
1 height: 50%;,而它的父元素的高度是100px,那么,这个div的高度应该是50px。
那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。
方法就是在css当中增加上:
html, body{ margin:0; height:100%; }
这样,在div中使用height:100%就能够正常显示了。
DIV高度100%无效原因