码字仓颉

CSS-Sticky-Footer

2017-07-28

  Sticky Footer 即绝对底部。具体效果就是：当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到。而当页面内容小于屏幕高度，页脚模块会固定在屏幕底部，就像是底边距为零的固定定位。

常见解决方法

  • 经典思路
    HTML： 

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="wrap">
        <div class="content">
            <p>内容</p>
        </div>
    </div>
    <div class="footer">
        <p>页脚</p>
    </div>

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    html,body {
        height: 100%;
    }
    body > .wrap {
        min-height: 100%;
    }
    .content {
        /* padding-bottom 等于 footer 的高度 */
        padding-bottom: 60px;
    }
    .footer {
        width: 100%;
        height: 60px;
        /* margin-top 为 footer 高度的负值 */
        margin-top: -60px;
    }

  • Flexbox解决方案
    HTML：

    1
    2
    3
    4
    5
    6
    <div class="content">
        <p>内容</p>
    </div>
    <div class="footer">
        <p>页脚</p>
    </div>

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    html, body {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    body .content {
        flex: 1;
    }

  • 固定高度的解决方案(不推荐)
    HTML：

    1
    2
    3
    4
    <body>
    　　<div class="content"></div>
    　　<div class="footer"></div>
    </body>

    CSS：

    1
    2
    3
    4
    .content{
        min-height:calc(100vh-footer的高度);
        box-sizing:border-box;
    }
Tags: CSS
← CSS定位 跨域及常见解决方案 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏

扫描二维码，分享此文章