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%”的集中应用。

 

该日志于2011-08-09 17:18由 Rainbow 发表在HTML/CSS分类下　　　　　　
posted @ 2012-06-04 17:38  xfyn  阅读(529)  评论(0)  编辑  收藏  举报