所謂 “Sticky Footer”，并不是什么新的前端概念和技術，它指的就是一種網頁效果：如果頁面內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁面的最底部。但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。
實現
方法
1. 將內容部分的底部外邊距設為負數
這是個比較主流的用法，把內容部分最小高度設為100%，再利用內容部分的負底部外邊距值來達到當高度不滿時，頁腳保持在窗口底部，當高度超出則隨之推出的效果。
| <body> <div class="wrapper"> content <div class="push"></div> </div> <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> <div class="content"> <div class="content-inside"> content </div> </div> <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> <div class="content"> content </div> <footer class="footer"></footer></body>html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;} |
你還可以在上面添加header或在下面添加更多元素?？蓮囊韵录记蛇x擇其一：
請記住，我們有《Flexbox完整指南（英） 》呢～
新聞熱點
疑難解答
