【css】头部底部固定，中间出现滚动条

参考：CSS flex布局，vh单位，头部和底部固定，中间出现滚动条

使用flex布局，头部和底部的高度可以根据内容来决定，也可以自己设置。

.container {
  height: 100vh; /* 这个值可以适当调整，不一定是100vh */
  display: flex;
  flex-direction: column;
}

.header {}

.content {
  flex-grow: 1;
  overflow: auto;
}

.footer {}

注意：vh是将可视化区域分为100份，是一个相对高度的概念，100vh就是相对可视化区域的100%，不是相对父节点的高度。

vh相关的一些使用：

• height: calc(100vh - 20px);，表示视窗高度减去20px作为height的值。

• 除去header、padding等之后的高度，才作为container的height。

• 

• 参考：【CSS笔记】— 使用calc()计算宽高（vw/vh）