footer置底是常見的需求,達成的方法也很多種,但過去許多方法都太過複雜又不彈性,
現在我們有了Flex,總算可以簡潔且有彈性的處理這個問題!
兼容性? 除非你要支援IE10以下,不然就大膽使用吧!
(或是說服客戶放棄老IE)
首先,確認我們要達到的效果為:
- 當內容不夠長,footer會保持在瀏覽器底部
- 當內容超出可視高度,footer自動被推到底部
實作:
確認頁面結構
<div class="container"> <main> <p>content</p> </main> <footer> footer </footer> </div>
設定最外層的CSS
.container { display: flex; //啟用flex flex-direction: column; //設定由上到下排列 min-height: 100vh; // 至少佔據可視範圍的整個高度 }
設定內容的CSS
main { flex: 1; // 高度自動伸展至所有剩餘的空間 }
完成,4行CSS解決!
範例Codepen
另外,如果要改成fixed footer效果,只要在footer加上
position: fixed;
left: 0;
bottom: 0;
width: 100%;
然後調整最外層的padding-bottom,避免內容被footer遮住,就ok了。