前言
很多同学在使用css+html写页面的时候，可能会遇到这样的场景：
页面除了头部和底部外，中间部分的内容为空时，页面就会出现底部向上顶，也就是头部和底部黏在一起了。
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<header>
this is header
</header>
<main class="container">
this is container
</main>
<footer>
this is footer
</footer>
</body>
</html>
css
.container {
min-height: calc(100vh - 70px);
background-color: #ff0;
}
footer {
height: 50px;
background-color: #f00;
}
总结：
这样就实现了一个网站的三段论了，头、身、尾。
附上名言