前端开发中，会有这样一种布局，当页面内容不足一屏时，页脚在屏幕底部，当内容超过一屏时，页脚随着内容的增加而向下移动，即人们常说的的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>