Sticky footers設計是最古老和最常見的效果之一。做項目時，我們經(jīng)常會碰到它：當頁面不足一屏幕時，footer能固定在視窗底部。當頁面大于一屏幕時，footer能夠被自動推下去。
在現(xiàn)在瀏覽器中，我們可以放心大膽的使用Flexbox實現(xiàn)Sticky footer。使用Flexbox，我們僅僅需要幾行css代碼，就能完美實現(xiàn)，而不需要做一些計算。
假設，我們的頁面結(jié)構(gòu)是這樣的。
<body>
<header>頭部，高度確定</header>
<main>主體部分，高度不確定</main>
<footer>底部，高度確定</footer
</body>
現(xiàn)在，需要實現(xiàn)sticky footer效果,那么，首先，我們需要給body添加一些樣式:
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
display:flex保證body是flexbox布局。flex-flow:column。使得子元素是縱向排列的。min-height:100vh;使得main高度不夠時，body至少還有一個視窗的高度。
main {
flex:1;
}
然后我們設置main的css樣式，flex:1。意思是，如果body是一視窗高度，去掉header和footer所占的高度后，剩下都歸main所有。
如果一來，我們就實現(xiàn)了sticky footer效果。
