CSS中如何让grid容器占满header和footer外的剩余视口空间

不需要使用absolute定位，用纵向flex布局就能实现需求，不会出现脱离文档流的适配问题，只需修改几处CSS即可。

问题原因 #

你之前的代码中，body虽然设置了100vh，但它的直接子元素.container没有继承高度，也没有配置纵向布局规则，所以header、main、footer都是默认按块级元素堆叠，高度各自由内容撑开，自然没法实现中间区域自适应、footer贴底的效果。

具体修改代码 #

• 给外层容器.container补充高度和弹性布局规则

.container {
  max-width: 1400px;
  margin: 0 auto;
  /* 新增代码 */
  height: 100%;
  display: flex;
  flex-direction: column;
}

• 给main标签补充规则，让它自动占据header和footer之外的剩余高度

main {
  flex: 1;
  display: grid;
}

这里加display: grid是为了让你原有.grid-container设置的align-self: center生效，实现内容在中间区域垂直居中的效果。

• 给footer设置固定高度50px，按需可加垂直居中规则

footer {
  padding: 0 40px;
  /* 新增代码 */
  height: 50px;
  line-height: 50px; /* 可选，让footer文字垂直居中 */
}

修改完成后页面总高度固定为100vh，header固定80px在顶部，footer固定50px在底部，中间main区域完全占满剩余空间，内部的grid容器保持原有垂直居中的布局效果。

内容的提问来源于stack exchange，提问作者Bluebug