码迷,mamicode.com
首页 > 其他好文 > 详细

全兼容的全屏自适应布局

时间:2016-06-20 20:20:08      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

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非常大, 造成的网页出现空白的问题。 

全兼容的全屏自适应布局

标签:

原文地址:http://www.cnblogs.com/zycbloger/p/5601393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!