這篇文章給大家分享的是有關(guān)Sticky Footer絕對(duì)底部的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的東安網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

絕對(duì)底部，或者說(shuō) Sticky Footer，是一種古老且經(jīng)典的頁(yè)面效果：

當(dāng)頁(yè)面內(nèi)容超出屏幕，頁(yè)腳模塊會(huì)像正常頁(yè)面一樣，被推到內(nèi)容下方，需要拖動(dòng)滾動(dòng)條才能看到

而當(dāng)頁(yè)面內(nèi)容小于屏幕高度，頁(yè)腳模塊會(huì)固定在屏幕底部，就像是底邊距為零的固定定位

一、經(jīng)典套路

這種套路的思路是，給內(nèi)容區(qū)域設(shè)置 min-height: 100%，將 footer 推到屏幕下方

然后給 footer 添加 margin-top，其值為 footer 高度的負(fù)值，就能讓 footer 回到屏幕底部

HTML：

<div class="wrap">
  <div class="content">
    <p>填充內(nèi)容</p>
  </div>
</div>
<div class="footer">
  <p>這是頁(yè)腳</p>
</div>

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 高度的負(fù)值 */
  margin-top: -60px;
}

需要注意的就是內(nèi)容區(qū)域 content 的 padding、footer 的 height 和 margin， 必須保持一致

這種寫(xiě)法的兼容性非常好，實(shí)測(cè) IE7 也能正常展示

但是如果頁(yè)面的主體布局有其他兼容性問(wèn)題，Sticky Footer 就需要做一些相應(yīng)的修改

二、Flexbox

不得不說(shuō)，CSS3 帶來(lái)了前端的一次變革，其中 Flexbox 更是帶來(lái)了網(wǎng)頁(yè)布局的一次變革

雖然兼容性限制了 Flexbox 在國(guó)內(nèi)的推廣，但不可否認(rèn)的是，F(xiàn)lexbox 是前端布局的一大趨勢(shì)

HTML:

<div class="content">
  <p>填充內(nèi)容</p>
  <hr />
</div>
<div class="footer">
  <p>這是頁(yè)腳@WiseWrong</p>
</div>

CSS:

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

body > .content {
  flex: 1;
}

和經(jīng)典套路相比，首先是 HTML 部分，內(nèi)容區(qū)域 content 不再需要 wrap 容器

然后 CSS 部分減肥成功，僅僅使用四行代碼，就解決了曾經(jīng)困擾了一代人的難題

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

當(dāng)然缺點(diǎn)也是顯而易見(jiàn)的，只有 IE10 及以上的瀏覽器才支持 flex 布局

感謝各位的閱讀！關(guān)于“Sticky Footer絕對(duì)底部的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：StickyFooter絕對(duì)底部的示例分析
網(wǎng)頁(yè)地址：http://www.rwnh.cn/article38/pgcspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、微信小程序、定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)