緊貼底部的頁腳

時間 2020-05-21

標籤緊貼底部頁腳简体版

原文原文鏈接

前言

在寫前端頁面時，常常會遇到這種狀況：有一個具備塊級樣式的頁腳，當頁面內容足夠長時它一切正常；有的時候，因爲頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來；頁腳不能像咱們指望中那樣「緊貼」在視口的最底部，而是緊跟在內容的下方。css

那麼怎樣作到內容多時頁腳在內容下方，內容少時頁腳「緊貼」在視口底部？我總結了四種方法。html

正文

首先我先寫一個簡單的頁面結構，以下：前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>緊貼底部的頁腳</title>
</head>
<body>
    <div class="wrapper">
        <header>
            <span>Header</span>
        </header>
        <main>
            <p>我是內容</p>
        </main>
    </div>
    <footer>
        <span>Fotter</span>
    </footer>
</body>
</html>

再頁面加點公共樣式：app

*{
    padding:0;
    margin: 0;
}
header{
    line-height: 80px;
}
header,footer{
    background-color: #ccc;
    text-align: center;
}
main{
    text-align: center;
    font-size: 30px;
}

接下來咱們用四種不一樣的方法來實現如何讓頁腳緊貼底部。wordpress

方法一

/* footer的每一級父元素都爲100%高 */
html,body {
    height: 100%;
    width: 100%;
}
/* 這裏將頁面內容最小高度設爲100%；撐滿屏幕，
而後使用margin-bottom負值把頁腳吸上來，
最後設置底部內邊距用來填充內容過多時被遮擋的頁腳。 */
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}
footer{
    height: 80px;
}

方法二

方法二和方法一比較相似，只是用僞元素取代了內邊距。代碼以下：函數

html,body {
    height: 100%;
    width: 100%;
}
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
}
/* 這裏用僞元素取代了方法一中.wrapper的內邊距 */
.wrapper::after{
    content: "";
    display: block;
    height: 80px;
}
footer{
    height: 80px;
}

方法三

方法三藉助視口相關的長度單位以及calc()函數。這兩個東西都只能兼容到IE9。佈局

.wrapper{
    min-height:calc(100vh - 80px);
}
footer{
    height: 80px;
}

前三種方法都有必定的侷限性，都要給頁腳設置固定的高度，不夠靈活。有沒有更加靈活的方法呢？
固然有，那就是咱們方法四了。flex

方法四

方法四用到了CSS3中的佈局神器Flexbox。ui

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.wrapper {
    flex: 1; 
}

這樣就能夠了！咱們只須要四行簡單的代碼，就完美實現了緊貼底部的頁腳。Flexbox是否是至關霸氣？
Flexbox兼容性不是很好（萬惡的IE），但在移動端仍是不錯的。能夠放心使用。spa

後記

上面是我總結的四種方法，若是還有什麼更好的方法，歡迎共同探討！

參考資料：
CSS 總在底部的頁腳
 CSS揭祕

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。