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