DIV 高度100%

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

一个简单的应用场景是:

1
2
3
4
5
6
7
    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
             <div id="content">内容</div>
        </body>
    </html>

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

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

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

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

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

1
2
3
4
5
6
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% 自适应完美的实现了。

放出另一个案例,”用Div模仿Frame框架(简单的酷的)",就是“DIV 高度100%”的集中应用。

站点统计