css sticky footer經(jīng)典布局的實(shí)現(xiàn)

發(fā)布時(shí)間：2020-03-02 16:29:08 作者：大海愛奔跑

這篇文章主要介紹了css sticky footer經(jīng)典布局的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

什么是sticky footer布局？

我們常見的網(wǎng)頁布局方式一般分為header（頁頭）部分,content（內(nèi)容區(qū)）部分和footer（頁腳）部分。當(dāng)頁頭區(qū)和內(nèi)容區(qū)的內(nèi)容較少時(shí)，頁腳區(qū)不是隨著內(nèi)容區(qū)排布而是始終顯示在屏幕的最下方。當(dāng)內(nèi)容區(qū)的內(nèi)容較多時(shí)，頁腳能隨著文檔流撐開始終顯示在頁面的最下方。這就是傳說中的Sticky footer布局。是不是很容易理解。不理解的小伙伴也沒關(guān)系下面我就舉個(gè)簡單的例子。

一般指手機(jī)頁面中，當(dāng)內(nèi)容高度撐不滿一屏?xí)r，頁腳緊貼屏幕底部；當(dāng)內(nèi)容高度超過一屏?xí)r，頁腳緊隨其后。

方法一：flex彈性盒子布局

父容器container的display為flex，并規(guī)定項(xiàng)目排列順序是縱向的
content元素的flex為1，即有多余空間就增大
footer定義一個(gè)高度

查看演示請(qǐng)狠狠地點(diǎn)擊：flex彈性盒子布局實(shí)現(xiàn)sticky footer

<div class="container">
  <div class="content">內(nèi)容</div>
  <div class="footer">頁腳</div>
</div>

body {
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
  /*非必須*/
  width: 100%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #71a8da;
  /*非必須*/
}
.footer {
  height: 60px;
  /*非必須*/
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #f85f2f;
  /*非必須*/
}

方法二：padding-bottom+負(fù)margin-top

容器wrapper需要指定min-height為100vh（vh：視窗高度）
內(nèi)容寫在content容器里，指定padding-bottom為footer容器的高度
footer指定高度和margin-top，并且margin-top為高度的負(fù)值

查看演示請(qǐng)狠狠地點(diǎn)擊：padding-bottom+負(fù)margin-top實(shí)現(xiàn)sticky footer

<div class="wrapper">
  <div class="content">內(nèi)容</div>
</div>
<div class="footer">頁腳</div>

body {
  margin: 0;
}
.wrapper {
  width: 100%;
  min-height: 100vh;
}
.content {
  /*padding-bottom應(yīng)等于footer的高度*/
  padding-bottom: 60px;
  /*非必須*/
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #71a8da;
  /*非必須*/
}
.footer {
  /*margin-top應(yīng)等于footer高度的負(fù)值*/
  margin-top: -60px;
  height: 60px;
  /*非必須*/
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #f85f2f;
  /*非必須*/
}

提示：兩個(gè)/**非必須**/之間的部分不是實(shí)現(xiàn)sticky footer布局的必要代碼，只是一些輔助樣式，可以刪除

到此這篇關(guān)于css sticky footer經(jīng)典布局的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css sticky footer內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！