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

177次阅读
没有评论

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

正文完
 0
flames
版权声明:本站原创文章,由 flames 于2021-11-19发表,共计759字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)