CSS實(shí)現(xiàn)Sticky Footer的示例代碼

發(fā)布時(shí)間：2018-01-24 14:24:28 作者：流口水流

這篇文章主要介紹了CSS實(shí)現(xiàn)Sticky Footer的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

所謂 “Sticky Footer”，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁(yè)效果：如果頁(yè)面內(nèi)容不足夠長(zhǎng)時(shí)，頁(yè)腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長(zhǎng)時(shí)，頁(yè)腳固定在頁(yè)面的最底部。但如果網(wǎng)頁(yè)內(nèi)容不夠長(zhǎng)，置底的頁(yè)腳就會(huì)保持在瀏覽器窗口底部。

實(shí)現(xiàn)

方法

1. 將內(nèi)容部分的底部外邊距設(shè)為負(fù)數(shù)

這是個(gè)比較主流的用法，把內(nèi)容部分最小高度設(shè)為100%，再利用內(nèi)容部分的負(fù)底部外邊距值來(lái)達(dá)到當(dāng)高度不滿(mǎn)時(shí)，頁(yè)腳保持在窗口底部，當(dāng)高度超出則隨之推出的效果。

<body>
  <div class="wrapper">
      content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  /* 等于footer的高度 */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

這個(gè)方法需要容器里有額外的占位元素（如.push）

需要注意的是.wrapper的margin-bottom值需要和.footer的負(fù)的height值保持一致，這一點(diǎn)不太友好。

2. 將頁(yè)腳的頂部外邊距設(shè)為負(fù)數(shù)

既然能在容器上使用負(fù)的margin bottom，那能否使用負(fù)margin top嗎？當(dāng)然可以。

給內(nèi)容外增加父元素，并讓內(nèi)容部分的底部?jī)?nèi)邊距與頁(yè)腳高度的值相等。

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

不過(guò)這種方法和上一種一樣，都需要額外添加不必要的html元素。

3. 使用flexbox彈性盒布局

以上三種方法的footer高度都是固定的，通常來(lái)說(shuō)這不利于網(wǎng)頁(yè)布局：內(nèi)容會(huì)改變，它們都是彈性的，一旦內(nèi)容超出固定高度就會(huì)破壞布局。所以給footer使用flexbox吧，讓它的高度可以變大變小變漂亮~（≧∇≦）

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

你還可以在上面添加header或在下面添加更多元素?？蓮囊韵录记蛇x擇其一：

flex: 1 使內(nèi)容（如：.content）高度可以自由伸縮
margin-top: auto

請(qǐng)記住，我們有《Flexbox完整指南（英）》呢～

4. absolute

通過(guò)絕對(duì)定位處理應(yīng)該是常見(jiàn)的方案，只要使得頁(yè)腳一直定位在主容器預(yù)留占位位置。

<div class="wrapper">
    <div class="content"><!-- 頁(yè)面主體內(nèi)容區(qū)域 --></div>
    <div class="footer"><!-- 需要做到 Sticky Footer 效果的頁(yè)腳 --></div>
</div>html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

這個(gè)方案需指定 html、body 100% 的高度，且 content 的 padding-bottom 需要與 footer 的 height 一致。

5. calc

通過(guò)計(jì)算函數(shù) calc 計(jì)算（視窗高度 - 頁(yè)腳高度）賦予內(nèi)容區(qū)最小高度，不需要任何額外樣式處理，代碼量最少、最簡(jiǎn)單。

<div class="wrapper">
    <div class="content"><!-- 頁(yè)面主體內(nèi)容區(qū)域 --></div>
    <div class="footer"><!-- 需要做到 Sticky Footer 效果的頁(yè)腳 --></div>
</div>.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

如果不需考慮 calc() 以及 vh 單位的兼容情況，這是個(gè)很理想的實(shí)現(xiàn)方案。同樣的問(wèn)題是 footer 的高度值需要與 content 其中的計(jì)算值一致。

6. table

通過(guò) table 屬性使得頁(yè)面以表格的形態(tài)呈現(xiàn)。

<div class="wrapper">
    <div class="content"><!-- 頁(yè)面主體內(nèi)容區(qū)域 --></div>
    <div class="footer"><!-- 需要做到 Sticky Footer 效果的頁(yè)腳 --></div>
</div>html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

需要注意的是，使用 table 方案存在一個(gè)比較常見(jiàn)的樣式限制，通常 margin、padding、border 等屬性會(huì)不符合預(yù)期。筆者不建議使用這個(gè)方案。當(dāng)然，問(wèn)題也是可以解決的：別把其他樣式寫(xiě)在 table 上。

7. 使用Grid網(wǎng)格布局

grid比f(wàn)lexbox還要新很多，并且更佳很簡(jiǎn)潔，我們同樣有《Grid完整指南（英）》奉上～

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

遺憾的是，網(wǎng)格布局（Grid layout）目前僅支持Chrome Canary和Firefox Developer Edition版本。

總結(jié)

以上幾種實(shí)現(xiàn)方案，筆者都在項(xiàng)目中嘗試過(guò)，每個(gè)實(shí)現(xiàn)的方法其實(shí)大同小異，同時(shí)也都有自己的利弊。其中有的方案存在限制性問(wèn)題，需要固定頁(yè)腳高度；其中有的方案需要添加額外的元素或者需要 Hack 手段。同學(xué)們可以根據(jù)頁(yè)面具體需求，選擇最適合的方案。

當(dāng)然，技術(shù)是不斷更新的，也許還有很多不同的、更好的方案。但相信大家最終目都是一樣的，為了更好的用戶(hù)體驗(yàn)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。