這次帶給大家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中文網其它相關文章！
推薦閱讀：
以上是Sticky Footer 絕對底部的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
