用flex佈局實現Sticky Footers

weixin_33890526發表於2017-05-04
Flex

Sticky Footer 佈局是在開發中經常會用到的一種佈局，它的效果簡而言之就是當內容的高度小於螢幕的高度時，footer元件會停留在螢幕的最下方，但如果內容高度大於螢幕高度，則footer會被推到內容的最下方.本文將討論如何使用flex佈局來解決這個問題。

HTML

  <body>
  <header>
    <h1>Header</h1>
  </header>
  <div class="main">
    <div>Main Content </div>
  </div>
  <footer>
    <h1>Sticky Footer</h1>
  </footer>
</body>

CSS

  <style>
    html,body {
      display: flex;
      flex-flow: column;
      min-height: 100vh;
    }

    .main {
      flex: 1;
    }
  </style>

解釋

這裡採用了flex佈局，flex-flow:column定義了縱向佈局，min-height:100vh定義了body的最小高度是100%的視窗高度。.main中的樣式flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，分別代表專案的放大比例(預設0)，專案的縮小比例(預設1)和專案在分配多餘空間之前佔據的主軸空間(預設auto，即專案的原大小)，這裡flex:1等同於flex:1 1 0%，如果其他專案的flex都是flex:1，則會等分剩餘空間。但假如<footer>設定了flex:2，那麼頁尾的高度將會是主內容高度的2倍。總的來說，為了實現sticky footer,min-height和flex的定義缺一不可。

相關連結

相關文章