CSS – Flexbox實現footer置底

ByHo

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

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

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

實作：

  1. 確認頁面結構
<div class="container">
       <main>
        <p>content</p>
      </main>
      <footer>
        footer
      </footer>
</div>
  1. 設定最外層的 CSS
.container {
    display: flex; //啟用flex
    flex-direction: column; //設定由上到下排列
    min-height: 100vh; // 至少佔據可視範圍的整個高度
}
  1. 設定內容的 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

Similar Posts