CSS如何实现header/footer固定，content随窗口大小自适应且可滚动

修复步骤 #

• 先给根元素添加全局基础样式，消除默认边距并占满视口高度：

html, body {
  margin: 0;
  height: 100%;
}

• 调整.container容器配置，让网格布局占满全屏，明确行高分配规则：

.container {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
}

• 调整.content样式，移除固定高度限制，仅保留滚动配置：

.content {
  border: 2px solid blue;
  overflow: auto;
}

• header和footer的原有样式可以保留，无需额外修改。

完整可运行CSS代码 #

html, body {
  margin: 0;
  height: 100%;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
}
.header {
  border: 2px solid red;
}

.content {
  border: 2px solid blue;
  overflow: auto;
}

.footer {
  border: 2px solid green;
}

效果说明 #

header和footer会根据自身内容高度自适应，始终固定在视口顶部和底部，中间content区域会自动填充剩余视口空间，当content内部内容超出自身高度时会自动出现滚动条，窗口大小变化时各区域会自动适配尺寸。

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