DIV高度100%无效原因

[福利]优酷/爱奇艺/芒果 TV等会员年卡低至4折79元


阿里云香港,新加坡30M带宽服务器,每月仅需24元


[福利]超清2K,4K手机壁纸网站推荐


当你设置一个页面元素的高度(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%就能够正常显示了。

未经允许不得转载:Bcoder资源网 » DIV高度100%无效原因

免费支持本站,谢谢大家!

bcoder资源网

微信公众号: bcoder资源网

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册