Sticky Footer 絕對底部的方法

來源:互聯網
上載者:User
這次給大家帶來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繪製扇形圖案

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.