當(dāng)你面臨這樣的問(wèn)題：有一個(gè)具有塊級(jí)樣式的頁(yè)腳（比如它設(shè)置了背景或陰影），當(dāng)頁(yè)面內(nèi)容足夠長(zhǎng)時(shí)它一切正常，當(dāng)頁(yè)面較短時(shí)（比如錯(cuò)誤信息頁(yè)面）就會(huì)出現(xiàn)問(wèn)題。此時(shí)的問(wèn)題在于，頁(yè)腳不能像我們期望中那樣“緊貼”在視口的底部，而是緊跟在內(nèi)容的下方：
<html>結(jié)構(gòu)
<main>
<h1>
來(lái)自馬格南前主席的終極攝影指南
</h1>
<p>
哪怕你從沒(méi)···/*段落文字*/
</p>
</main>
<footer>
<p>
【這是頁(yè)腳】“要是你想成為一位靠譜的攝影師,
</p>
<p>
本質(zhì)上唯一重要的事情就是要具有視覺(jué)的觸感——其余都是后天可以學(xué)來(lái)的。”
</p>
</footer>
假設(shè)這個(gè)頁(yè)腳的文本永遠(yuǎn)不可能折行，那我們就可以推算出它實(shí)際所占的高度：
2行 x 行高 + 3 x 段落的垂直外邊距 + 頁(yè)腳的垂直內(nèi)邊距 = 2行 x 1.5em + 3 x 1em + 2 x 1em = 8em
接下來(lái)借助視口的長(zhǎng)度單位以及 calc（）函數(shù)，就可以把頁(yè)腳“固定”到底部：
main {
min-height:calc(100vh -8em);
box-sizing:border-box;
}
這個(gè)方法是有效的，而且似乎要比那些需要固定高度的方案要稍微好一些。不過(guò)如果頁(yè)面布局不是這么簡(jiǎn)單的話，那這個(gè)方法就完全不實(shí)用了。（它要求我們頁(yè)腳文本永遠(yuǎn)不會(huì)折行，而且每當(dāng)我們改變頁(yè)腳的尺寸時(shí)，都需要跟著調(diào)整 min-height 值。）
更靈活的解決方案 Flexbox 對(duì)于此類問(wèn)題是完美的選擇：
首先對(duì)<body> 元素設(shè)置 display：flex； 因?yàn)樗沁@兩個(gè)主要區(qū)塊的父元素，當(dāng)父元素獲得這個(gè)屬性之后，就可以對(duì)其子元素觸發(fā)“伸縮盒布局模型”。 然后還需要把 flex-flow設(shè)置為column，否則子元素會(huì)被水平排放在一行上：
但是當(dāng)我設(shè)置了flex-flow:column 之后，畫(huà)面看起來(lái)還是與沒(méi)設(shè)置 flexbox 的時(shí)候一樣-頁(yè)腳緊貼著內(nèi)容：
body {
display:flex;
flex-flow:column
}
這是因?yàn)樗性囟颊紦?jù)了整個(gè)視口的寬度，而他們的高度也都是由其自身的內(nèi)容來(lái)決定的。因此我們需要把 <body> 的 min-height 屬性指定為 100vh，這樣它級(jí)至少會(huì)占據(jù)整個(gè)視口的高度。
body {
display:flex;
flex-flow:column;
min-height:100vh;
}
不過(guò)此時(shí)，畫(huà)面效果仍然沒(méi)有變化。原因在于，我們已經(jīng)為整個(gè) body 元素指定了最小高度，但各個(gè)子元素的高度仍然是以各自的內(nèi)容為準(zhǔn)的（它們的高度仍然由內(nèi)部因素決定）。
此時(shí)我們期望的是，頁(yè)頭和頁(yè)腳的高度以其內(nèi)部因素決定，而內(nèi)容區(qū)塊的高度應(yīng)該可以自動(dòng)伸展占滿所有可用空間。只要給<main>這個(gè)容器的 flex 屬性指定一個(gè)大于0的值（比如1即可）：
body {
display:flex;
flex-flow:column;
min-height:100vh;
}
main {
flex:1;
}
參考書(shū)籍：Lea Verou《CSS揭秘》
