今天工作状态不好，放松一下，找了个教程，学习下 CSS。
对于常见的上中下三栏布局：页头、正文、页脚，如何保持页脚固定在最底部？下面是一个简化的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
}
body {
min-height: 100vh;
}
main {
padding: 1rem;
max-width: 80ch;
margin: 10px auto;
outline: 2px dashed grey;
}
header,
footer {
display: grid;
place-items: center;
background-color: rebeccapurple;
color: #fff;
height: 100px;
}
</style>
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<main>
<p>
This is a main content. This is a main content. This is a main content. This is a main
content.
</p>
</main>
<footer>
<p>This is a footer.</p>
</footer>
</body>
</html>
有两种实现方法。用 grid 最简单，且可以保证正文内容自动填满页头和页脚之间的所有空间。但是使用这种方法，需要注意顶层嵌套结构。
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
如果使用 flex 布局，则页头页脚中间可以任意添加顶级元素，而无需包装在 main 标签内。但是这种写法，main 元素不会自动填充高度。
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}