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