HTML 网页不满屏时让footer固定在底部，网页满屏时随高度走

316次阅读

共计 759 个字符，预计需要花费 2 分钟才能阅读完成。

网页不满屏时，让footer固定在底部，网页满屏时，随高度走

<html>
<head>
    <meta charset="utf-8">
    <title>footer始终居于底部</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/1.8 arial;
        }

        html, body, .wrap {
            height: 100%;
        }

        .wrap {
            height: auto;
            min-height: 100%;
            _height: 100%;
            background: #CCC;
            color: #fff;
            font-size: 18px;
            text-align: center;
        }

        .main {
            padding-bottom: 80px;
        }

        .footer {
            position: relative;
            height: 80px;
            line-height: 80px;
            margin-top: -80px;
            background: #333;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="main">
            <h1>七七事变祭</h1>
            <p>中华民族创辉煌，</p>
            <p>倭寇菲佣心中慌。</p>
            <p>为虎作伥傍老美，</p>
            <p>东海南海滋事狂。</p>
            <br />
            <p>历史潮流不可挡，</p>
            <p>中华儿女当自强。</p>
            <p>警钟长鸣记国耻，</p>
            <p>发展经济强国防。</p>
            <br />
            <p>七七事变77周年，勿忘国耻，振兴中华！！！</p>
            <br />
        </div>
    </div>
    <div class="footer">
        <h1>页面高度不满，底部固定</h1>
    </div>
</body>
</html>

正文完