全兼容的全屏自适应布局

1.原理

body, html高度等到全屏高度

使用position:absolute;的方式来定义最外层的div, 内层的div 可以通过height:100%来渲染高, 这样就可以说不用在js的帮助下来实现全立屏的自适应布局

关于兼容 ie6 采用让body的上内边距等到 top 层的高度, 下内边距等到 bottom 层的高度, 通过这样的效果达到中间层高度等height:100%的效果

内层 inner-box 的高度在 ie67 无法实现height:100%的效果, 因为如果在 ie67 下父层的在高度不确定、position:absolute 的情况下，子层height:100%无法实现

上面提到 ie6 是采用 body的内边距的方式实现的, 所以

*height:expression(document.getElementById('content').offsetHeight+"px"); //来兼容ie7 内层高度无法100%的问题,当然 * 是针对ie67的, 同样就ie6有效

上句的代码是利用父层的高度来赋值给子层, 所以在ie6也是没问题的。

2.代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">

        /* 全屏自适应布局  */
        html,body{width:100%;height:100%;overflow:hidden;margin:0;}

        /*让ie6 的内边距 */
        html{_height:auto;_padding:100px 0 50px;}
        .top,.content,.foot{position:absolute;left:0;}
        .top,.foot{width:100%;}
        .content{top:100px;bottom:50px;_height:100%;overflow:auto;}
        .top{top:0;height:100px; background:#f00;}
        .content{_position:relative;right:0;_top:0;_left:0; background:#000;}
        .foot{height:50px; bottom:0; background:#f56;}

        .inner-box{
            height:100%;
            background:#faa;
            *height:expression(document.getElementById('content').offsetHeight+"px");
        }
    </style>
</head>
<body>
    <!-- 头 -->
    <div class="top"></div>

    <!-- 中间 -->
    <div class="content" id="content">
        <!-- 内容 -->
        <div class="inner-box">
            
        </div>
    </div>

    <!-- 底 -->
    <div class="foot"></div>
</body>
</html>

3.作用

通常采用这种布局的方式是针对一些后台管理系统的网页来使用的, 减少js resize事件的调用, 对用户友好, 也防止在渲染的时候由于js非常大, 造成的网页出现空白的问题。