這種是一個非常常見的布局方式，但是對于新手來說是比較常見的難題。
這種布局方式在后臺管理系統(tǒng)中比較常見，當我們內(nèi)容不足瀏覽器窗口高度時，底部內(nèi)容需要固定在底部。當內(nèi)容超出了瀏覽器窗口高度，就會隨著內(nèi)容往后推。
- 原文來源：詳情
在有CSS3之前，實現(xiàn)這個效果是頗有難度的。瀏覽器窗口高度是會根據(jù)不同用戶打開瀏覽器的情況，屏幕大小的差異和瀏覽器的縮放比例而變。我們需要借助JavaScript來實時獲取瀏覽器高度進行運算才能實現(xiàn)。雖然說標題是說“固定”底部，但是我們想要的效果不是position: fixed。使用固定定位，在內(nèi)容高于窗口高度時，就會擋住我們的內(nèi)容。
隨著CSS3的來臨，最完美的實現(xiàn)方式是使用Flexbox。實現(xiàn)的關鍵就是使用不太被關注的flex-grow屬性，可以在我們的內(nèi)容標簽元素（比如div）中使用。在我們下面的例子里使用了main標簽。
我來講解一下實現(xiàn)原理吧。
flew-grow是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間。如果我們使用flex-grow: 0，那這個flex元素就完全不會擴展了。所以我們需要把頭部和底部之間的內(nèi)容標簽元素設置為flex-grow: 1或者flex-grow: auto，這樣內(nèi)容部分就會自動填充滿頭部和底部之外的所有空間。
為了避免底部內(nèi)容受內(nèi)容部分擴充空間的影響，我們給footer底部元素flex-shrink: 0屬性。flex-shrink的作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間，這里我們給了flex-shrink: 0就是為了底部footer的大小不受影響。
我們直接上HTML和CSS代碼看看是怎么實現(xiàn)的。
- HTML
<div id="document">
<nav>
<h1>頭部內(nèi)容</h1>
</nav>
<main>
<p>可以添加更多內(nèi)容看看底部的變化哦！</p>
</main>
<footer>
<h1>底部內(nèi)容</h1>
</footer>
</div>
- CSS
#document {
height: 100vh;
display: flex;
flex-direction: column;
background: #202020;
font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}
nav, footer {
background: #494949;
display: flex;
justify-content: center;
}
main {
color: #bdbdbd;
flex: auto;
}
footer {
flex-shrink: 0;
}
* {
margin: 0;
}
h1,
p {
padding: 15px;
}
nav > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
footer > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
知識點總結：
- flex-grow?— 是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間
- flex-shrink?— 作用與
flex-grow是恰恰相反，用來控制flex元素收縮的空間