最近更新
阅读排行
关注本站

如何让 height:100% 起作用

阅读:1698 次   编辑日期: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>
将本篇文章分享到:
top