简单而兼容性好的Web自适应高度布局，纯CSS

纯CSS实现的自适应高度布局，中间内容不符自动滚动条。兼容IE9以上、chrome、FF。关键属性是box-sizing: border-box。

不废话，直接上代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{padding:0;margin:0}
    .head{
        height:90px;
        background: #090;
        position: absolute;
        width: 100%;
    }
    .content{
        height:100%;
        background: #808;
        position: absolute;
        width: 100%;
        padding:90px 0 30px 0;
        box-sizing: border-box;
        z-index: -1;
    }
    .foot{
        height:30px;
        background: #890;
        position: fixed;
        bottom:0;
        width: 100%;
    }
    .cnt{
        height:100%;
        overflow: auto;
    }
</style>
<body>
<div class="head">Head</div>
<div class="content">
    <div class="cnt">
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/>
        <div>div here</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容
    </div>
</div>
<div class="foot">Foot</div>
</body>
</html>

 

posted on 2016-08-10 15:29  东篱南山  阅读(378)  评论(0)  编辑  收藏  举报

导航