原文**於：
我們常見的網頁布局方式一般分為header（頁頭）部分,content（內容區）部分和footer（頁尾）部分。當頁頭區和內容區的內容較少時，頁尾區不是隨著內容區排布而是始終顯示在螢幕的最下方。當內容區的內容較多時，頁尾能隨著文件流撐開始終顯示在頁面的最下方。這就是傳說中的sticky footer布局。
"detail">
"title">
"main">
這裡是main content區域...
這裡是main content區域...
這裡是main content區域...
這裡是main content區域...
"footer">
made with ♥ by an anonymous pastafarian.
*
html,body,.detail
body>.detail
.main
.footer
.clearfix::after
移動端效果圖：
.main /* 若不懂請看本文末尾的鏈結 */
footer
pc端效果圖：
移動端效果圖：
flex布局結構簡單，**精簡。因為flex存在著相容性，所以在使用這種方式布局時需要注意。
Sticky footer經典布局
html 這是乙個p標籤 這是乙個p標籤 執行效果自行複製 實踐，這個是經過我自己多次測試發現沒有問題的。需要注意的是，content的padding bottom是與footer的margin top以及height一致的值，只是margin top的值是負而已。css html 這是乙個p標籤 ...
網頁布局 StickyFooter
網頁布局中經常會遇到這種問題，那就是我們的網頁footer並不能呢一直停留在網頁的底部。我們一般的慣用方法就是將網頁的footer固定定位。但是如果我們將footer固定定位後，我們的網頁內容多，一屏顯示不出來時，我們的footer仍在視窗的底部，並且遮擋我們的內容，那麼我們今天的這種布局方式，就是...
認識Sticky footer布局
1.簡單理解就是 沒內容時，它在底部，有內容時它始終顯示在內容的底部，不會被內容覆蓋掉，相當於footer部分就固定在了底部。2.該布局的設定方式 包裹內容區的盒子以及內容區的高度均為100 與此同時為內容區設定乙個padding bottom 100px 設定的這個值就是給底部區域留的 那麼底部區...