CSS - Flexbox實現footer置底

footer置底是常見的需求，達成的方法也很多種，但過去許多方法都太過複雜又不彈性，
現在我們有了Flex，總算可以簡潔且有彈性的處理這個問題！

兼容性? 除非你要支援IE10以下，不然就大膽使用吧！
（或是說服客戶放棄老IE）

首先，確認我們要達到的效果為：

• 當內容不夠長，footer會保持在瀏覽器底部
• 當內容超出可視高度，footer自動被推到底部
  

實作：

1. 確認頁面結構

   <div class="container">
       <main>
        <p>content</p>
      </main>
      <footer>
        footer
      </footer>
   </div>
   

2. 設定最外層的CSS

   .container {
    display: flex; //啟用flex
    flex-direction: column; //設定由上到下排列
    min-height: 100vh; // 至少佔據可視範圍的整個高度
   }
   

3. 設定內容的CSS

   main {
    flex: 1; // 高度自動伸展至所有剩餘的空間
   }
   

完成，4行CSS解決！
範例Codepen

另外，如果要改成fixed footer效果，只要在footer加上

  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

然後調整最外層的padding-bottom，避免內容被footer遮住，就ok了。

範例Codepen-fixed footer