這種是一個(gè)非常常見的布局方式，但是對于新手來說是比較常見的難題。
這種布局方式在后臺管理系統(tǒng)中比較常見，當(dāng)我們內(nèi)容不足瀏覽器窗口高度時(shí)，底部內(nèi)容需要固定在底部。當(dāng)內(nèi)容超出了瀏覽器窗口高度，就會(huì)隨著內(nèi)容往后推。
- 原文來源：詳情
在有CSS3之前，實(shí)現(xiàn)這個(gè)效果是頗有難度的。瀏覽器窗口高度是會(huì)根據(jù)不同用戶打開瀏覽器的情況，屏幕大小的差異和瀏覽器的縮放比例而變。我們需要借助JavaScript來實(shí)時(shí)獲取瀏覽器高度進(jìn)行運(yùn)算才能實(shí)現(xiàn)。雖然說標(biāo)題是說“固定”底部，但是我們想要的效果不是position: fixed。使用固定定位，在內(nèi)容高于窗口高度時(shí)，就會(huì)擋住我們的內(nèi)容。
隨著CSS3的來臨，最完美的實(shí)現(xiàn)方式是使用Flexbox。實(shí)現(xiàn)的關(guān)鍵就是使用不太被關(guān)注的flex-grow屬性，可以在我們的內(nèi)容標(biāo)簽元素（比如div）中使用。在我們下面的例子里使用了main標(biāo)簽。
我來講解一下實(shí)現(xiàn)原理吧。
flew-grow是用來控制一個(gè)flex元素相對它同等級flex元素的自身可擴(kuò)充的空間。如果我們使用flex-grow: 0，那這個(gè)flex元素就完全不會(huì)擴(kuò)展了。所以我們需要把頭部和底部之間的內(nèi)容標(biāo)簽元素設(shè)置為flex-grow: 1或者flex-grow: auto，這樣內(nèi)容部分就會(huì)自動(dòng)填充滿頭部和底部之外的所有空間。
為了避免底部內(nèi)容受內(nèi)容部分?jǐn)U充空間的影響，我們給footer底部元素flex-shrink: 0屬性。flex-shrink的作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間，這里我們給了flex-shrink: 0就是為了底部footer的大小不受影響。
我們直接上HTML和CSS代碼看看是怎么實(shí)現(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;
}
知識點(diǎn)總結(jié)：
- flex-grow?--- 是用來控制一個(gè)flex元素相對它同等級flex元素的自身可擴(kuò)充的空間
- flex-shrink?--- 作用與
flex-grow是恰恰相反，用來控制flex元素收縮的空間
