前端必懂之Sticky Footer(粘性頁腳)

---

寫在最前：Sticky Footer是css的一種佈局場景。頁腳footer永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站因爲內容太短經常版權頁腳前移，移動端特定佈局也須要Sticky Footer來解決這些問題。

1、利用絕對定位和padding完美兼容

已知底部高度，利用絕對定位和padding完美兼容
https://codepen.io/qietuniu/pen/KYxMwv

1. 去除標籤多餘的margin,padding,給html和body設置100%
2. 外部容器min-height爲100%，使得內容少時也能撐開
3. 主體內容設置padding-bottom，這個爲底部的高度，可使內容徹底顯示不然會使主體內容有底部面積大小區域被遮擋
4. footer高度固定，進行絕對定位

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切圖妞</div>
</div>

樣式代碼

html,
body {
  height: 100%;
}
.container {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識別min-height*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0px;
}

2、利用padding-bottom和margin-top完美兼容

已知底部高度，利用padding-bottom和margin-top完美兼容
https://codepen.io/qietuniu/pen/dLqpdR

1. 去除標籤多餘的margin,padding,給html和body設置100%；
2. 外部容器min-height爲100%，使得內容少時也能撐開
3. 主體內容設置padding-bottom，這個爲底部的高度
4. footer高度固定，margin-top的值爲高度負值，footer與container同級。

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
</div>
<div class="footer">Copyright© 1994-2019 切圖妞</div>

樣式代碼

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識別min-height*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: relative;
  margin-top: -60px;
  width: 100%;
  height: 60px;
}

3、新增塊級元素填補頁腳遮擋

已知底部高度，新增塊級元素填補頁腳遮擋，實現完美兼容
https://codepen.io/qietuniu/pen/dLqpez

1. 去除標籤多餘的margin,padding,給html和body設置100%；
2. 外部容器min-height爲100%，使得內容少時也能撐開
3. 主體內容設置margin-bottom，值爲底部的高度的負值
4. footer位置在與container同級，section同級新增塊元素.底部和新增塊元素高度一致

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="placeholder"></div>
</div>
<div class="footer">Copyright© 1994-2019 切圖妞</div>

樣式代碼

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識別min-height*/
  margin-bottom: -60px;
}
.placeholder,
.footer {
  height: 60px;
}

4、用表格屬性實現完美兼容

底部不定高度，利用表格屬性實現完美兼容
https://codepen.io/qietuniu/pen/QPVKVR

1. 去除標籤多餘的margin,padding,給html和body設置100%
2. 外部容器min-height爲100%;使得內容少時也能撐開，display屬性設置爲table
3. 主體內容display屬性設置爲table-row，高度設置爲100%

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切圖妞</div>
</div>

樣式代碼

html,
body {
  height: 100%;
}
.container {
  display: table;
  width: 100%;
  min-height: 100%;
}
.section {
  display: table-row;
  height: 100%;
}

5、calc計算

vh存在兼容有限，通常在移動端使用。100vh可代替body和html的100%來拿到視口高度實現效果
https://codepen.io/qietuniu/pen/NmLRmV

1. 外部容器使用calc計算，100vh減去底部高度
2. footer位置與container同級，高度固定
3. 主體內容display屬性設置爲table-row，高度設置爲100%

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
</div>
 <div class="footer">Copyright© 1994-2019 切圖妞</div>

樣式代碼

.container {
  min-height: calc(100vh - 60px);
}
.footer {
  height: 60px;
}

6、flex彈性佈局

底部不定高度，利用flex彈性佈局實現效果，兼容性有限建議移動端使用
https://codepen.io/qietuniu/pen/EJeNYW

1. 外部容器display設爲flex彈性佈局，flex-flow設置方向爲column縱向並設置最小高度爲100vh
2. 主體內容flex屬性設爲1

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切圖妞</div>
</div>

樣式代碼

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.section {
  flex: 1
}

7、Grid網格佈局

底部不定高度，利用Grid網格實現效果，兼容性有限建議移動端使用
https://codepen.io/qietuniu/pen/EJeNYW

1. 外部容器display設爲grid網格佈局，grid-template-rows設置一個網格的行，fr單位能夠幫助咱們建立一個彈列的網格軌道,它表明了網格容器中可用的空間（就像Flexbox中無單位的值）
2. header頭部的位置放在主體內容內部
3. footer中grid-row-start和grid-row-end屬性設置單元格開始和結束的行線

DOM節點

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 切圖妞</div>
</div>

樣式代碼

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

結語

以上方法各有優劣，根據使用場景選擇合適的方案

場景	方案
兼容性要求高	①②③
底部不固定高度	④⑥⑤⑦
PC端建議	①②
移動端建議	①②⑥

完整代碼

尊重原創，如需轉載請註明出處！