CSS经典布局——底部固定


前端

零度逍遥

2017-08-01 18:57:46

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }

    header {
        position: fixed; /* absolute */
        width: 100%;
        height: 60px;
        background: #f00;
    }

    .wrapper {
        background: pink;
        min-height: 100%;
        box-sizing: border-box;
        padding: 60px 0 50px;
    }

    footer {
        background: #0f0;
        height: 50px;
        margin-top: -50px;
    }
</style>
<header>头部</header>
<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> 内容 <br>

</div>
<footer>底部</footer>
</body>
</html>