標籤:

CSS實現Sticky Footer 【絕對底部】

什麼是 「Sticky Footer」

所謂 「Sticky Footer」,並不是什麼新的前端概念和技術,它指的就是一種網頁效果:

如果頁面內容不足夠長時,頁腳固定在瀏覽器窗口的底部;如果內容足夠長時,頁腳固定在頁面的最底部。但如果網頁內容不夠長,置底的頁腳就會保持在瀏覽器窗口底部。

實現方法

1. 將內容部分的底部外邊距設為負數

這是個比較主流的用法,把內容部分最小高度設為100%,再利用內容部分的負底部外邊距值來達到當高度不滿時,頁腳保持在窗口底部,當高度超出則隨之推出的效果。

<body>n <div class="wrapper">n contentn <div class="push"></div>n </div>n <footer class="footer"></footer>n</body>nhtml, body {n height: 100%;n margin: 0;n}n.wrapper {n min-height: 100%;n /* 等於footer的高度 */n margin-bottom: -50px;n}n.footer,n.push {n height: 50px;n}n

這個方法需要容器里有額外的佔位元素(如.push

需要注意的是.wrapper的margin-bottom值需要和.footer的負的height值保持一致,這一點不太友好。

2. 將頁腳的頂部外邊距設為負數

既然能在容器上使用負的margin bottom,那能否使用負margin top嗎?當然可以。

給內容外增加父元素,並讓內容部分的底部內邊距與頁腳高度的值相等

<body>n <div class="content">n <div class="content-inside">n contentn </div>n </div>n <footer class="footer"></footer>n</body>nhtml, body {n height: 100%;n margin: 0;n}n.content {n min-height: 100%;n}n.content-inside {n padding: 20px;n padding-bottom: 50px;n}n.footer {n height: 50px;n margin-top: -50px;n}n

不過這種方法和上一種一樣,都需要額外添加不必要的html元素。

3. 使用flexbox彈性盒布局

以上三種方法的footer高度都是固定的,通常來說這不利於網頁布局:內容會改變,它們都是彈性的,一旦內容超出固定高度就會破壞布局。所以給footer使用flexbox吧,讓它的高度可以變大變小變漂亮~(≧?≦)

<body>n <div class="content">n contentn </div>n <footer class="footer"></footer>n</body>nhtml {n height: 100%;n}nbody {n min-height: 100%;n display: flex;n flex-direction: column;n}n.content {n flex: 1;n}n

你還可以在上面添加header或在下面添加更多元素。可從以下技巧選擇其一:

  • flex: 1 使內容(如:.content)高度可以自由伸縮
  • margin-top: auto

請記住,我們有《Flexbox完整指南(英)》呢~

4. absolute

通過絕對定位處理應該是常見的方案,只要使得頁腳一直定位在主容器預留佔位位置。

<div class="wrapper">n <div class="content"><!-- 頁面主體內容區域 --></div>n <div class="footer"><!-- 需要做到 Sticky Footer 效果的頁腳 --></div>n</div>nhtml, body {n height: 100%;n}n.wrapper {n position: relative;n min-height: 100%;n padding-bottom: 50px;n box-sizing: border-box;n}n.footer {n position: absolute;n bottom: 0;n height: 50px;n}n

這個方案需指定 html、body 100% 的高度,且 content 的 padding-bottom 需要與 footer 的 height 一致。

5. calc

通過計算函數 calc 計算(視窗高度 - 頁腳高度)賦予內容區最小高度,不需要任何額外樣式處理,代碼量最少、最簡單。

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

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

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

6. table

通過 table 屬性使得頁面以表格的形態呈現。

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

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

需要注意的是,使用 table 方案存在一個比較常見的樣式限制,通常 margin、padding、border 等屬性會不符合預期。

筆者不建議使用這個方案。當然,問題也是可以解決的:別把其他樣式寫在 table 上。

7. 使用Grid網格布局

grid比flexbox還要新很多,並且更佳很簡潔,我們同樣有《Grid完整指南(英)》奉上~

<body>n <div class="content">n contentn </div>n <footer class="footer"></footer>n</body>n

html {n height: 100%;n}nbody {n min-height: 100%;n display: grid;n grid-template-rows: 1fr auto;n}n.footer {n grid-row-start: 2;n grid-row-end: 3;n}n

遺憾的是,網格布局(Grid layout)目前僅支持Chrome Canary和Firefox Developer Edition版本。

總結

以上幾種實現方案,筆者都在項目中嘗試過,每個實現的方法其實大同小異,同時也都有自己的利弊。

其中有的方案存在限制性問題,需要固定頁腳高度;其中有的方案需要添加額外的元素或者需要 Hack 手段。同學們可以根據頁面具體需求,選擇最適合的方案。

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

作者:流口水流n鏈接:https://juejin.im/post/5a118733f265da43111fcd83n來源:掘金n著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。n

推薦閱讀:

學完W3school後還是看不懂一般網頁的html,還應該學什麼呢?求大神幫助!
為什麼 CSS 3 要實現垂直居中那麼的難?
實現CSS居中的多種方法
為什麼有些網站的版權不用©而用??

TAG:CSS |