如何让 height:100% 起作用
阅读:4084 次 编辑日期:2015-11-30
目录:
概述:
已经连续两个星期没有更新了,因为电脑坏了,一直在等双11买的电脑,再加上前一段时间事比较多,一时耽搁了。
今天我来说说CSS的问题,我们平时经常用 width:100% ,但是发现 height:100% 却不管用,这是为什么呢?如何能让 height:100% 管用呢,今天我们来说一说。
为什么 width:100% 管用:
因为浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果不给width设定值,那浏览器会自动将页面内容平铺填满整个横向宽度。比如一个DIV不设定width,把里面打满了字,这个DIV的宽度绝对是浏览器的宽度。
为什么 height:100% 不管用:
浏览器对 height 的计算方式不一样,浏览器不会计算内容的高度,除非出现了滚动条或者设定了 height ,否则浏览器就是认为DOM会往下堆,所以页面的高度对于浏览器来说是不需要考虑的。
浏览器对 height 不敏感,那么 就无法获取父元素的 height,height:100% 自然就不管用了。其实对于父元素来说 height 的值是 auto;一个height:auto的父元素的 height:100%只得到 undefined。
如何让 height:100% 起作用:
你需要给这个元素的所有父元素的高度设定height:100%。
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
这样这个div的高度就是100%了
</div>
</body>
</html>