緊貼底部的頁腳

最新 06-17

前言

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

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

正文

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

緊貼底部的頁腳

Header

我是內容

Fotter

再頁面加點公共樣式：

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

接下來我們用四種不同的方法來實現如何讓頁腳緊貼底部。

方法一/* 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; }

前三種方法都有一定的局限性，都要給頁腳設置固定的高度，不夠靈活。有沒有更加靈活的方法呢？

當然有，那就是我們方法四了。

方法四

方法四用到了中的布局神器Flexbox。

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

這樣就可以了！我們只需要四行簡單的代碼，就完美實現了緊貼底部的頁腳。是不是相當霸氣？

兼容性不是很好（萬惡的IE），但在移動端還是不錯的。可以放心使用。

後記

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！