首頁 > web前端 > css教學 > 主體

Sticky Footer 絕對底部的方法

php中世界最好的语言
發布: 2018-03-21 09:51:49
原創
1820 人瀏覽過

這次帶給大家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 佈局

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

純css實作照片牆3D效果

#Css繪製扇形圖案

以上是Sticky Footer 絕對底部的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!