前端開發中，會有這樣一種佈局，當頁面內容不足一屏時，頁腳在屏幕底部，當內容超過一屏時，頁腳隨着內容的增加而向下移動，即人們常說的的stick footer佈局，如下圖所示。
實現這個佈局的方案有多種，下面給大家介紹一種比較經典的實現方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 中經典的 stick footer 佈局</title>
<style>
* {
margin: 0;
}
#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;
}
/* 以上是重要代碼 */
h1,
p {
text-align: center;
padding: 15px;
}
nav>h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
footer>h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
</style>
</head>
<body>
<div id="document">
<nav>
<h1>頭部內容</h1>
</nav>
<main>
<p>可以添加更多內容看看底部的變化</p>
</main>
<footer>
<h1>底部內容</h1>
</footer>
</div>
</body>
</html>