DIV高度100%

SJY发表于:2018年04月10日 12:14 • 阅读:

DIV 高度100%,也是我们比较常用的一个做法,那么如何高度100%自适应和兼容所有的浏览器是我们今天要讨论的小技巧。

一个简单的应用场景是:

<!DOCTYPE html>
    <html>
        <head></head>
        <body>
             <div id="content">内容</div>
        </body>
    </html>


根据上面的场景,我们要实现,ID为content的DIV高度100%,我们首先想到的做法是

html,body{height:100%;}
#content{height:100%;}

内容满一屏或小于一屏的时候正常以上做法还能用,相反内容超过一屏的时候,ID为content的DIV设置的背景色或背景图片时就不是那么完美了,这个时候它只有一屏背景色或背景图片,超出一屏在第二屏显示的就没有背景色或背景图片了,被截取了。

这个时候,通过测试发现IE6坚挺着,没问题,满足需求。而其它的ie7+ 和 moz & webkit 核心的浏览器都无法满足需求。

接下来,就需要我们补救了。

html,body{height:100%;}
#content{
        height:auto!important; /*for ie6 bug and ie7+,moz,webkit 正确*/
        height:100%; /*修复IE6,all browser*/
        min-height:100%; /*for ie6 bug and ie7+,moz,webkit 正确*/
}

就这样,DIV 高度100% 自适应完美的实现了。
原文地址:http://blog.moocss.com/code-snippets/html-css-code-snippets/1617.html

欢迎转载,但请保留原文地址 http://www.sjyhome.com/css/1327.html

回复(0)