最近更新
阅读排行
关注本站
如何让 height:100% 起作用
阅读：3947 次 编辑日期：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>
