Sticky Footer 絕對底部的兩種套路實例詳解

本文主要介紹了詳解Sticky Footer 絕對底部的兩種套路，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

絕對是底部，或者說Sticky Footer，是一種古老且經典的頁面效果：

當頁面內容超出屏幕，頁腳模組會像正常頁面一樣，被推到內容下方，需要拖曳捲軸才能看到

而當頁面內容小於螢幕高度，頁腳模組會固定在螢幕底部，就像是底邊距為零的固定定位

#一、經典套路

這種套路的想法是，給內容區域設定min-height: 100%，將footer推到畫面下方

接著在footer 上加入margin-top，其值為footer 高度的負值，就能讓footer 回到畫面下方

HTML：

##

<p class="wrap">
  <p class="content">
    <p>填充内容</p>
  </p>
</p>
<p class="footer">
  <p>这是页脚</p>
</p>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

#要注意的就是內容區域content 的padding、footer 的height 和margin，必須保持一致

這種寫法的兼容性非常好，實測IE7 也能正常展示

但是如果頁面的主體佈局有其他兼容性問題，Sticky Footer 就需要做一些相應的修改

二、Flexbox

#不得不說，CSS3 帶來了前端的一次變革，其中Flexbox 更是帶來了網頁佈局的一次變革

雖然相容性限制了Flexbox 在國內的推廣，但不可否認的是，Flexbox 是前端佈局的一大趨勢

HTML:

##

<p class="content">
  <p>填充内容</p>
  <hr />
</p>
<p class="footer">
  <p>这是页脚@WiseWrong</p>
</p>

CSS:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body > .content {
  flex: 1;
}

和經典套路相比，首先是HTML 部分，內容區域content 不再需要wrap 容器

然後CSS 部分減肥成功，僅僅使用四行程式碼，就解決了曾經困擾了一代人的難題

而且使用Flexbox，就不需要限定footer 的高度，讓頁面佈局更加靈活

當然缺點也是顯而易見的，只有IE10 及以上的瀏覽器才支援flex 佈局

相關建議：

CSS定位DIV絕對底部_html/css_WEB-ITnose

footer固定底部的方法

如何用javascript判斷滾動條到底部程式碼實例詳解

以上是Sticky Footer 絕對底部的兩種套路實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！