摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內(nèi)容不夠長的時候頁腳黏在視窗底部，內(nèi)容足夠長時會被向下移動。老式門戶網(wǎng)站由于內(nèi)容過短常常版權(quán)頁腳前移，移動端特定布局也需要來解決這些問題。

寫在最前：Sticky Footer是css的一種布局場景。頁腳footer永遠固定在頁面的底部，頁面內(nèi)容不夠長的時候頁腳黏在視窗底部，內(nèi)容足夠長時會被向下移動。老式門戶網(wǎng)站由于內(nèi)容過短常常版權(quán)頁腳前移，移動端特定布局也需要Sticky Footer來解決這些問題。

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

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%

外部容器min-height為100%，使得內(nèi)容少時也能撐開

主體內(nèi)容設(shè)置padding-bottom，這個為底部的高度，可以使內(nèi)容完全顯示否則會使主體內(nèi)容有底部面積大小區(qū)域被遮擋

footer高度固定，進行絕對定位

DOM節(jié)點

  

  

  
  
Copyright? 1994-2019 切圖妞

樣式代碼

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;
}

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

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%；

外部容器min-height為100%，使得內(nèi)容少時也能撐開

主體內(nèi)容設(shè)置padding-bottom，這個為底部的高度

footer高度固定，margin-top的值為高度負值，footer與container同級。

DOM節(jié)點

  

  

  

Copyright? 1994-2019 切圖妞

樣式代碼

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;
}

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

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%；

外部容器min-height為100%，使得內(nèi)容少時也能撐開

主體內(nèi)容設(shè)置margin-bottom，值為底部的高度的負值

footer位置在與container同級，section同級新增塊元素.底部和新增塊元素高度一致

DOM節(jié)點

  

  

  
  


Copyright? 1994-2019 切圖妞

樣式代碼

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

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

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%

外部容器min-height為100%;使得內(nèi)容少時也能撐開，display屬性設(shè)置為table

主體內(nèi)容display屬性設(shè)置為table-row，高度設(shè)置為100%

DOM節(jié)點

  

  

  
  
Copyright? 1994-2019 切圖妞

樣式代碼

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

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

外部容器使用calc計算，100vh減去底部高度

footer位置與container同級，高度固定

主體內(nèi)容display屬性設(shè)置為table-row，高度設(shè)置為100%

DOM節(jié)點

  

  

  

 
Copyright? 1994-2019 切圖妞

樣式代碼

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

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

外部容器display設(shè)為flex彈性布局，flex-flow設(shè)置方向為column縱向并設(shè)置最小高度為100vh

主體內(nèi)容flex屬性設(shè)為1

DOM節(jié)點

  

  

  
  
Copyright? 1994-2019 切圖妞

樣式代碼

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

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

外部容器display設(shè)為grid網(wǎng)格布局，grid-template-rows設(shè)置一個網(wǎng)格的行，fr單位可以幫助我們創(chuàng)建一個彈列的網(wǎng)格軌道,它代表了網(wǎng)格容器中可用的空間（就像Flexbox中無單位的值）

header頭部的位置放在主體內(nèi)容內(nèi)部

footer中g(shù)rid-row-start和grid-row-end屬性設(shè)置單元格開始和結(jié)束的行線

DOM節(jié)點

  

  

  
  
Copyright? 1994-2019 切圖妞

樣式代碼

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

以上方法各有優(yōu)劣，根據(jù)使用場景選擇合適的方案

完整代碼

尊重原創(chuàng)，如需轉(zhuǎn)載請注明出處！