页面内容小于一屏时仍能头部在头部尾部在尾部-优快云博客

本文介绍了一种确保网页头部和尾部始终显示在顶部和底部的方法，即使页面内容较少也能实现这一效果。通过使用特定的HTML和CSS结构，可以创建美观且响应式的网页布局。

<!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>