頁(yè)面的 HTML 結構是這樣：

<div class="wrapper">
    <div class="content"><!-- 頁(yè)面主體內容區域 --></div>
    <div class="footer"><!-- 需要做到 Sticky Footer 效果的頁(yè)腳 --></div>
</div>

通過(guò)絕對定位處理應該是常見(jiàn)的方案，只要使得頁(yè)腳一直定位在主容器預留占位位置。

html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

這個(gè)方案需指定 html、body 100% 的高度，且 wrapper的 padding-bottom 需要與 footer 的 height 一致。

實(shí)現方案二：calc

通過(guò)計算函數 calc 計算（視窗高度 - 頁(yè)腳高度）賦予內容區最小高度，不需要任何額外樣式處理，代碼量最少、最簡(jiǎn)單。

.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

如果不需考慮 calc() 以及 vh 單位的兼容情況，這是個(gè)很理想的實(shí)現方案。
同樣的問(wèn)題是 footer 的高度值需要與 content 其中的計算值一致。

實(shí)現方案三：table

通過(guò) table 屬性使得頁(yè)面以表格的形態(tài)呈現。

html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

筆者不建議使用這個(gè)方案。當然，問(wèn)題也是可以解決的：別把其他樣式寫(xiě)在 table 上。

實(shí)現方案四：Flexbox

Flexbox 是非常適合實(shí)現這種效果的，使用 Flexbox 實(shí)現不僅不需要任何額外的元素，而且允許頁(yè)腳的高度是可變的。

雖然大多數 Flexbox 布局常用于水平方向布局，但別忘了實(shí)際上它也可用于垂直布局，所以你需要做的是將垂直部分包裝在一個(gè) Flex 容器中，并選擇要擴展的部分，他們將自動(dòng)占用其容器中的所有可用空間。

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

需要注意的是想要兼容各種系統設備，需要兼顧 flex 的兼容寫(xiě)法。

寫(xiě)在最后

以上幾種實(shí)現方案，筆者都在項目中嘗試過(guò)，每個(gè)實(shí)現的方法其實(shí)大同小異，同時(shí)也都有自己的利弊。
其中有的方案存在限制性問(wèn)題，需要固定頁(yè)腳高度；其中有的方案需要添加額外的元素或者需要 Hack 手段。同學(xué)們可以根據頁(yè)面具體需求，選擇最適合的方案。

當然，技術(shù)是不斷更新的，也許還有很多不同的、更好的方案。但相信大家最終目都是一樣的，為了更好的用戶(hù)體驗！