CSS五種方式實現Footer置底

1. 前言

當使用不同的瀏覽器時，常常遇到不同的高度，而導致Footer無法置底時可使用下面五種方式來置底。

2. 目的

使footer能一直置底部。

3. 實作練習

【方法一】 將內容部分的底部外邊距設為負數

整個wrapper為100%的高，margin-bottom: -50px（等同頁尾的高度）

【方法二】將頁腳的頂部外邊距設為負數

將content最小設定為100%，並讓內容部分的底部內邊距與頁腳高度的值相等

footer的margin-top: -50px、height: 50px;

【方法三】使用calc（）設置內容的高度

這樣元素間就不會有重疊發生，也不需要控制內外邊距了，

假設倆元素有20px的間距，所以70px=50px+20px

以上三種都是固定高度，但不利於網頁布局，一超出固定高就容易破壞整個畫面，所以給footer使用flexbox，讓他的高度可以隨著各種方式改變。

【方法四】4.使用flexbox彈性盒布局

【方法五】使用Grid網格布局

不過目前只有Chrome Canary和Firefox能夠支援所以不建議使用

以上五種是以css能簡單排版的，若更複雜就需要用JS做算數的寫法來控製頁尾。

4. 參考來源

https://kknews.cc/zh-tw/other/gv8qbzy.html