事件源起

最近有一個 issue 是這樣的。因為 PM 大大很不滿現在 footer 的樣式，要我改一改。現在我們網站的 footer 樣式是這樣，網站的內容最小高度是 100vh，而 footer 的內容則在內容之後，也就是說，使用者如果想看到 footer 一定要滾動卷軸才看的到，即使該頁內容只有一點點，根本不用滾動卷軸，下方會有一大片空白，然後使用者還是要滾動卷軸之後，才看的到 footer。我記得當初 footer 使用絕對定位會把過長的內容蓋掉想出的權宜之計，總而言之，PM 對帳樣的設計還是很不滿意，要我趕快改成她滿意的樣式。於是我問她，她想要什麼樣式。她想要的樣式可以用以下這張圖表示:

總而言之，footer 可以分為兩種情形。第一種:內容小於螢幕高度的時候，footer 固定置底第二種:內容大於螢幕高度的時候，footer 則在內容後方

好吧，聽到這個要求的時候，一開始我還真的想不到怎麼只用 CSS 做出這樣的效果，第一個反應是一定要用 javascript 去算內容的高度再給 footer 相對應的設定了。不過身為一個複製貼上的專家，當然能夠複製貼上，當然不會自己寫。於是 google 一下看看別人都怎麼做的。原本是想 google javascript 的程式碼，沒想到找到一篇文章只用 CSS 就可以達成這樣的效果，裡面有五種方法可以達成這樣的效果。當然要趕快來試試。

###解決方法

以下分享我試過成功的方法

html 結構

<div class="content">
  <div class="content-inside">
  <!-- 內容內容 -->
  </div>
</div>
<div class="footer">footer內容</div>

再來就是最重要的 CSS 設定啦

html, body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
min-height: 100vh;
}
.content-inside {
padding-bottom: 50px; //x
}
.footer {
height: 50px; //x=footer 高度
margin-top: -50px; //x
}

簡單解釋一下，就內容的最小高度也就是整個螢幕的高度。而 footer 就在內容後方，但是幫 footer 設定一個負值的 margin-top，跟 footer 的高度一樣，也就是說，footer 高度多高，他就會往上縮多高。可是這樣如果網頁內容的東西很多的時候，不就會遮住原本最重要的內容了嗎?因此只要再設定一個 padding-bottom 讓內容往內縮不就好了嗎?如此一來，大功告成!

雖然不是很難的 CSS，但是只能說，很佩服想到可以這樣做的人，可以只用純 CSS 的方法，就達成這麼厲害的效果，就像隨便出招，就可以精準命中神秘大俠。

以下附上原文
CSS 五种方式实现 Footer 置底

本文使用的是第一種方法，不過高度的設定，那篇文章是 100%，而我是設定 100vh，有興趣的話可以試試另外四種方法。第二種方法我也有試過，原理跟第一種差不多，不過有一點麻煩。第三、第四、第五種蠻新鮮的，有空也會來試試看，不過要注意的是，這些方法可能都有相容性的問題，尤其是如果還要支援萬惡的 IE，建議還是使用第一種方法，是最安全最保險的方法。