何為Sticky footer布局？

我們常見的網頁布局方式一般分為header（頁頭）部分,content（內容區）部分和footer（頁腳）部分。當頁頭區和內容區的內容較少時，頁腳區不是隨著內容區排布而是始終顯示在屏幕的最下方。當內容區的內容較多時，頁腳能隨著文檔流撐開始終顯示在頁面的最下方。這就是傳說中的Sticky footer布局。是不是很容易理解。不理解的小伙伴也沒關系下面我就舉個簡單的例子。

舉個栗子

當內容較少時，正常的文檔流顯示如下圖：

在正常文檔流中，當內容較少時，頁腳部分不會始終固定在屏幕的最下方。這時候就該讓傳說中的sitcky footer布局出現了。

sticky footer布局效果如下圖所示：

不管內容區有多少內容，頁腳始終顯示在屏幕的最下方，當內容區域超過屏幕的高度時。頁腳會始終顯示在頁面的最底部。現在小伙伴們徹底認識sticky footer的真面目了吧，下面讓我們一起看看它是如何實現的。

Sticky footer布局實現

負margin布局方式

html代碼：

css代碼：

注：main里的 padding-bottom和footer里的負margin值要保持一致。

flex布局方式