在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
Flexbox解决方案
解决这类问题，Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现，而且不需要一些奇怪的计算或添加额外的HTML元素。首先，我们需要在<body>元素上设置display:flex。如果父元素(<body>)的三个块元素，使用Flexbox切换布局，还需要设置flex-flow:column
这里我们需要在页头和页脚设置高度，但其内容的高度自动伸缩的来适配剩余空间。我们可以在<main>上设置flex值大于0(常用的是1)
body {
display: flex;
flex-flow: column;
}
main { flex: 1; }比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.main {
flex: 1;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="main">内容</div>
<div class="footer">底部</div>
</body>
</html>