CSS - Flexbox實現footer置底


Posted by Andy Tsai on 2020-05-13

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


#flex #Flexbox #sticky footer #w3HexSchool







Related Posts

一看就懂的 JSX 簡明入門教學指南

一看就懂的 JSX 簡明入門教學指南

網路安全(1) - 基礎密碼學

網路安全(1) - 基礎密碼學

From Nand To Tetris:想理解電腦運作,就先做出一台吧!

From Nand To Tetris:想理解電腦運作,就先做出一台吧!


Comments