CSS實作Sticky Footer實例教程-css教學-PHP中文網

首頁

web前端

css教學

CSS實作Sticky Footer實例教程

小云云

Jan 27, 2018 am 10:10 AM

sticky

本文主要介紹了CSS實作Sticky Footer的範例程式碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

所謂“Sticky Footer”，並不是什麼新的前端概念和技術，它指的就是一種網頁效果：如果頁面內容不足夠長時，頁腳固定在瀏覽器視窗的底部；如果內容夠長時，頁腳固定在頁面的最底部。但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器視窗底部。

實作

#方法

1. 將內容部分的底部外邊距設為負數

這是個比較主流的用法，把內容部分最小高度設為負數

這是個比較主流的用法，把內容部分最小高度設為100%，再利用內容部分的負底部外邊距值來達到當高度不滿時，頁腳保持在視窗底部，當高度超出則隨之推出的效果。

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

登入後複製

這個方法需要容器裡有額外的佔位元素（如.push）

#需要注意的是.wrapper的margin-bottom值需要和.footer的負的height值保持一致，這一點不太友善。

2. 將頁腳的頂部外邊距設為負數

既然能在容器上使用負的margin bottom，那能否使用負margin top嗎？當然可以。

為內容外增加父元素，並讓內容部分的底部內邊距與頁腳高度的值相等。

<body>
  <p class="content">
    <p class="content-inside">
      content
    </p>
  </p>
  <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;
}

登入後複製

不過這種方法和上一個一樣，都需要額外加入不必要的html元素。

3. 使用flexbox彈性盒佈局

以上三種方法的footer高度都是固定的，通常來說這不利於網頁佈局：內容會改變，它們都是彈性的，一旦內容超出固定高度就會破壞佈局。所以給footer使用flexbox吧，讓它的高度可以變大變小變漂亮~（≧∇≦）

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

登入後複製

你還可以在上面加上header或在下面增加更多元素。可從下列技巧選擇其一：
flex: 1 使內容（如：.content）高度可以自由伸縮

margin-top : auto

請記住，我們有《Flexbox完整指南（英）》呢～

4. absolute

#透過絕對定位處理應該是常見的方案，只要使得頁腳一直定位在主容器預留佔位位置。

<p class="wrapper">
    <p class="content"><!-- 页面主体内容区域 --></p>
    <p class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></p>
</p>html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

登入後複製

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

5. calc

透過計算函數calc 計算（視窗高度- 頁腳高度）賦予內容區最小高度，不需要任何額外樣式處理，程式碼量最少、最簡單。

<p class="wrapper">
    <p class="content"><!-- 页面主体内容区域 --></p>
    <p class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></p>
</p>.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

登入後複製

如果不需要考慮 calc() 以及 vh 單位的相容情況，這是個很理想的實作方案。同樣的問題是 footer 的高度值需要與 content 其中的計算值一致。

6. table

透過 table 屬性使得頁面以表格的形式呈現。

<p class="wrapper">
    <p class="content"><!-- 页面主体内容区域 --></p>
    <p class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></p>
</p>html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

登入後複製

要注意的是，使用 table 方案有一個比較常見的樣式限制，通常 margin、padding、border 等屬性會不符合預期。筆者不建議使用這個方案。當然，問題也是可以解決的：別把其他樣式寫在 table 上。

7. 使用Grid網格佈局

grid比flexbox還要新很多，並且更佳很簡潔，我們同樣有《Grid完整指南（英）》奉上～

<body>
  <p class="content">
    content
  </p>
  <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;
}

登入後複製

遺憾的是，網格佈局（Grid layout）目前僅支援Chrome Canary和Firefox Developer Edition版本。

總結

以上幾種實作方案，筆者都在專案中嘗試過，每個實作的方法其實大同小異，同時也都有自己的優缺點。其中有的方案有限制性問題，需要固定頁腳高度；其中有的方案需要增加額外的元素或需要 Hack 手段。同學可以依照頁面具體需求，選擇最適合的方案。

當然，科技是不斷更新的，也許還有很多不同的、更好的方案。但相信大家最終目都是一樣的，為了更好的使用者體驗！