css中sticky footer經典布局的實現方法

小編給大家分享一下css中sticky footer經典布局的實現方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

什么是sticky footer布局？

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

一般指手機頁面中，當內容高度撐不滿一屏時，頁腳緊貼屏幕底部；當內容高度超過一屏時，頁腳緊隨其后。

方法一：flex彈性盒子布局

• 父容器container的display為flex，并規定項目排列順序是縱向的

• content元素的flex為1，即有多余空間就增大

• footer定義一個高度

查看演示請狠狠地點擊：flex彈性盒子布局實現sticky footer

<div class="container">
  <div class="content">內容</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+負margin-top

• 容器wrapper需要指定min-height為100vh（vh：視窗高度）

• 內容寫在content容器里，指定padding-bottom為footer容器的高度

• footer指定高度和margin-top，并且margin-top為高度的負值

查看演示請狠狠地點擊：padding-bottom+負margin-top實現sticky footer

<div class="wrapper">
  <div class="content">內容</div>
</div>
<div class="footer">頁腳</div>

body {
  margin: 0;
}
.wrapper {
  width: 100%;
  min-height: 100vh;
}
.content {
  /*padding-bottom應等于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應等于footer高度的負值*/
  margin-top: -60px;
  height: 60px;
  /*非必須*/
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #f85f2f;
  /*非必須*/
}

提示：兩個/**非必須**/之間的部分不是實現sticky footer布局的必要代碼，只是一些輔助樣式，可以刪除。

以上是“css中sticky footer經典布局的實現方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！