所謂 “Sticky Footer”，並不是什麼新的前端概念和技術，它指的就是一種網頁效果：如果頁面內容不足夠長時，頁尾固定在瀏覽器視窗的底部；如果內容足夠長時，頁尾固定在頁面的最底部。但如果網頁內容不夠長，置底的頁尾就會保持在瀏覽器視窗底部。
實現
方法
1. 將內容部分的底部外邊距設為負數
這是個比較主流的用法，把內容部分最小高度設為100%，再利用內容部分的負底部外邊距值來達到當高度不滿時，頁尾保持在視窗底部，當高度超出則隨之推出的效果。
<body> <p class="wrapper"> content <p class="push"></p> </p> <footer class="footer"></footer></body>html, body { height: 100%; margin: 0;}.wrapper { min-height: 100%; /* 等於footer的高度 */ margin-bottom: -50px;}.footer,.push { height: 50px;}
這個方法需要容器裡有額外的佔位元素（如.push）
需要注意的是.wrapper的margin-bottom值需要和.footer的負的height值保持一致，這一點不太友好。
2. 將頁尾的頂部外邊距設為負數
既然能在容器上使用負的margin bottom，那能否使用負margin top嗎？當然可以。
給內容外增加父元素，並讓內容部分的底部內邊距與頁尾高度的值相等。
<body> <p class="content"> <p class="content-inside"> content </p> </p> <footer class="footer"></footer></body>html, body { height: 100%; margin: 0;}.content { min-height: 100%;}.content-inside { padding: 20px; padding-bottom: 50px;}.footer { height: 50px; margin-top: -50px;}
不過這種方法和上一種一樣，都需要額外添加不必要的html元素。
3. 使用flexbox彈性盒布局
以上三種方法的footer高度都是固定的，通常來說這不利於網頁布局：內容會改變，它們都是彈性的，一旦內容超出固定高度就會破壞布局。所以給footer使用flexbox吧，讓它的高度可以變大變小變漂亮~（≧∇≦）
<body> <p class="content"> content </p> <footer class="footer"></footer></body>html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;}
你還可以在上面添加header或在下面添加更多元素。可從以下技巧選擇其一：
flex: 1 使內容（如：.content）高度可以自由伸縮
margin-top: auto
請記住，我們有《Flexbox完整指南（英） 》呢～
4. absolute
通過絕對位置處理應該是常見的方案，只要使得頁尾一直定位在主容器預留佔位位置。
<p class="wrapper"> <p class="content"><!-- 頁面主體內容地區 --></p> <p class="footer"><!-- 需要做到 Sticky Footer 效果的頁尾 --></p></p>html, body { height: 100%;}.wrapper { position: relative; min-height: 100%; padding-bottom: 50px; box-sizing: border-box;}.footer { position: absolute; bottom: 0; height: 50px;}
這個方案需指定 html、body 100% 的高度，且 content 的 padding-bottom 需要與 footer 的 height 一致。
5. calc
通過計算函數 calc 計算（視窗高度 - 頁尾高度）賦予內容區最小高度，不需要任何額外樣式處理，代碼量最少、最簡單。
<p class="wrapper"> <p class="content"><!-- 頁面主體內容地區 --></p> <p class="footer"><!-- 需要做到 Sticky Footer 效果的頁尾 --></p></p>.content { min-height: calc(100vh - 50px);}.footer { height: 50px;}
如果不需考慮 calc() 以及 vh 單位的相容情況，這是個很理想的實現方案。同樣的問題是 footer 的高度值需要與 content 其中的計算值一致。
6. table
通過 table 屬性使得頁面以表格的形態呈現。
<p class="wrapper"> <p class="content"><!-- 頁面主體內容地區 --></p> <p class="footer"><!-- 需要做到 Sticky Footer 效果的頁尾 --></p></p>html, body { height: 100%;}.wrapper { display: table; width: 100%; min-height: 100%;}.content { display: table-row; height: 100%;}
需要注意的是，使用 table 方案存在一個比較常見的樣式限制，通常 margin、padding、border 等屬性會不符合預期。筆者不建議使用這個方案。當然，問題也是可以解決的：別把其他樣式寫在 table 上。
7. 使用Grid網格布局
grid比flexbox還要新很多，並且更佳很簡潔，我們同樣有《Grid完整指南（英） 》奉上～
<body> <p class="content"> content </p> <footer class="footer"></footer></body>html { height: 100%;}body { min-height: 100%; display: grid; grid-template-rows: 1fr auto;}.footer { grid-row-start: 2; grid-row-end: 3;}
遺憾的是，網格布局（Grid layout）目前僅支援Chrome Canary和Firefox Developer Edition版本。
總結
以上幾種實現方案，筆者都在項目中嘗試過，每個實現的方法其實大同小異，同時也都有自己的利弊。其中有的方案存在限制性問題，需要固定式頁面腳高度；其中有的方案需要添加額外的元素或者需要 Hack 手段。同學們可以根據頁面具體需求，選擇最適合的方案。
當然，技術是不斷更新的，也許還有很多不同的、更好的方案。但相信大家最終目都是一樣的，為了更好的使用者體驗！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
