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

209次阅读

共计 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>

正文完