Sticky Footer 布局是在開發(fā)中經常會用到的一種布局快鱼，它的效果簡而言之就是當內容的高度小于屏幕的高度時，footer組件會停留在屏幕的最下方边篮，但如果內容高度大于屏幕高度均蜜，則footer會被推到內容的最下方.本文將討論如何使用flex布局來解決這個問題。
HTML
<body>
<header>
<h1>Header</h1>
</header>
<div class="main">
<div>Main Content </div>
</div>
<footer>
<h1>Sticky Footer</h1>
</footer>
</body>
CSS
<style>
html,body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.main {
flex: 1;
}
</style>
解釋
這里采用了flex布局救崔，flex-flow:column定義了縱向布局，min-height:100vh定義了body的最小高度是100%的視窗高度捏顺。.main中的樣式flex屬性是flex-grow,flex-shrink和flex-basis的簡寫六孵，分別代表項目的放大比例(默認0)，項目的縮小比例(默認1)和項目在分配多余空間之前占據的主軸空間(默認auto幅骄，即項目的原大小)劫窒，這里flex:1等同于flex:1 1 0%，如果其他項目的flex都是flex:1拆座，則會等分剩余空間主巍。但假如<footer>設置了flex:2，那么頁腳的高度將會是主內容高度的2倍挪凑≡兴鳎總的來說，為了實現(xiàn)sticky footer,min-height和flex的定義缺一不可躏碳。
