當(dāng)你在布局網(wǎng)頁時，有可能會遇到類似下面的這種情況
導(dǎo)致這一問題的原因是頁面內(nèi)容太少缺虐，無法將內(nèi)容區(qū)域撐開割坠，從而在 footer 下面留下一大塊空白。
本文將介紹一種現(xiàn)代化的方法陨簇，?確保 footer 始終處于頁面的底部吐绵。
解決方法
?解決該問題的最好方法是采用 flexbox——CSS3提供的一種先進布局模型，旨在建立具有適應(yīng)性的布局。如果你對 flexbox 還不怎么熟悉己单，文章最后有一些擴展閱讀鏈接唉窃，可以幫助你了解 flexbox。
我們的演示頁面應(yīng)該具備 Header纹笼、主體內(nèi)容區(qū)域和 Footer纹份，下面是該頁面的 HTML
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
為了啟用 flex模式，我們將 body 的 display 屬性設(shè)置為 flex, 然后將方向?qū)傩栽O(shè)置為列, （默認(rèn)是行廷痘，也就是橫向布局）蔓涧。同時，將html 和 body 元素的高度設(shè)置為100%笋额，使其充滿整個屏幕元暴。
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
現(xiàn)在，我們需要調(diào)整各個區(qū)域占用的頁面空間兄猩，我們將通過flex 屬性來達(dá)到這一目的茉盏，該屬性實際包含了三個屬性，分別是：
- flex-grow：元素在同一容器中對可分配空間的分配比率厦滤，及擴展比率
- flex-shrink：如果空間不足援岩，元素的收縮比率
- flex-basis：元素的伸縮基準(zhǔn)值
我們希望 header 和footer 只占用他們應(yīng)該占用的空間，將剩余的空間全部交給主體內(nèi)容區(qū)域
header{
/* 我們希望 header 采用固定的高度掏导，只占用必須的空間 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 將 flex-grow 設(shè)置為1享怀，該元素會占用全部可使用空間
而其他元素該屬性值為0，因此不會得到多余的空間*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* 和 header 一樣趟咆，footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
最終的效果如下圖所示添瓷。通過點擊中央的粉紅按鈕改變主體內(nèi)容，footer 會始終顯示在頁面的最底部值纱。
demo 頁面地址：http://demo.tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/ （看效果可能需要翻墻）
結(jié)論
如你說見鳞贷，如果是從零開始構(gòu)建布局，flexbox 將會是你的得力助手虐唠。除了極少數(shù)的例外搀愧，所有的主流瀏覽器都支持 flexbox，?就 IE 來說疆偿，IE9以后的版本都是支持的咱筛。
下面是一些學(xué)習(xí) flexbox 布局模型不錯的教程和速查表
- CSS-Trick 的 flex box 快速指南
- 一個專門提供酷炫 flexbox 技術(shù)的網(wǎng)站：Solved by Flexbox
- 5分鐘互動教程
