網(wǎng)頁開發(fā)中往往需要固定頁面頂部及底部，這類布局開發(fā)往往應(yīng)用在后臺(tái)管理系統(tǒng)。那么 CSS 如何固定底部內(nèi)容呢？這篇文章告訴你。
實(shí)現(xiàn)效果：
在實(shí)現(xiàn)效果圖中，我們可以清晰看到灰色部分區(qū)域即是頂部內(nèi)容區(qū)域和底部內(nèi)容內(nèi)容區(qū)域。我們可以往中間填充內(nèi)容。
實(shí)現(xiàn)原理：
我們使用?flex-grow?來控制一個(gè) flex 元素相對(duì)它同等級(jí) flex 元素的自身可擴(kuò)展空間，將它的值設(shè)為?1?或者?auto?，那么內(nèi)容就會(huì)自動(dòng)填充滿頭部和底部之外的所有空間。
我們還得給 footer 底部設(shè)置?flex-shrink:0?，來保證底部 footer 的大小不受影響。
實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS如何固定底部- 編程獅(w3cschool.cn)</title>
<style type="text/css">
* {
margin: 0;
}
#document {
height: 100vh;
display: flex;
flex-direction: column;
background: #202020;
}
nav, footer {
background: #ccc;
display: flex;
justify-content: center;
}
main {
color: #bdbdbd;
flex: auto;
}
footer {
flex-shrink: 0;
}
h1,p {
padding: 15px;
}
nav > h1 {
color: white;
}
footer > h1 {
color: white;
}
</style>
</head>
<body>
<div id="document">
<nav>
<h1>頭部內(nèi)容</h1>
</nav>
<main>
<p>內(nèi)容填充</p>
</main>
<footer>
<h1>底部內(nèi)容</h1>
</footer>
</div>
</body>
</html>以上就是文章“CSS 如何固定底部內(nèi)容？附源碼！”的全部內(nèi)容。更多 CSS 技術(shù)文章學(xué)習(xí)請(qǐng)前往 w3cschool。
