页面内容小于一屏时仍能头部在头部尾部在尾部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内容小于一屏时仍能头部在头部尾部在尾部</title>
    <style>
    *{
        padding:0;
        margin:0;
        text-align:center;
    }
    /*
    html, body {height: 100%;}*/
    header{
        width:100%;
        height:50px;
        background:red;
    }
    #box{
        width:100%;
        min-height:100%;
        /*height:auto;*/
        position:absolute;
    }
    .container{
        width:100%;
        min-height:100px;
        height:auto;
        
        
    }
    footer{
        width:100%;
        height:50px;
        background:blue;
        position:absolute;
        left:0;
        bottom:0;
    }
    </style>
</head>
<body>
        <div id="box">
        <header>
            头部
        </header>
        <div class="container">
            内容区<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>
        <footer>
            底部

        </footer>
        </div>
</body>
</html>

效果图:

posted @ 2017-05-18 16:00  贺小鸣  阅读(216)  评论(0编辑  收藏  举报
为尊重他人劳动成果,转载/摘抄请标明来源!