如何让header与footer之间的flex容器占满浏览器窗口高度并解决滚动问题

解决方案 #

核心利用flex布局的自动空间分配能力替换硬编码的魔术高度，无需JS介入即可适配所有动态高度场景： #

第一步：全局布局适配，让main自动占满header和footer之间的可用空间

给根元素和body设置基础样式，让页面整体占满视口高度，用垂直flex布局分配空间：

/* 新增全局基础样式 */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
header, footer {
  flex-shrink: 0; /* 避免header/footer被挤压变形 */
}

第二步：修改main的高度规则，移除硬编码固定高度

main {
  display: flex;
  column-gap: 3px;
  width: 100%;
  /* 删掉原有的 height: 600px */
  flex: 1; /* 自动填充header/footer之外的所有剩余高度 */
  overflow-x: auto;
}

第三步：调整列和内容区布局，适配h3多行场景

给每一列开启垂直flex布局，让内容区自动占用h3之外的剩余高度：

.column {
  width: 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column; /* 列内元素垂直排列 */
}
.column .content {
  /* 删掉原有的 height: 570px */
  flex: 1; /* 自动占用h3之外的所有剩余高度 */
  overflow-y: auto; /* 内容溢出时自动出现垂直滚动条 */
}

修改完成后，不管header/footer高度变化，还是某一列的h3内容换行成多行，布局都会自动适配：main永远占满二者中间的全部空间，列数量超出视口宽度时main自动触发水平滚动，列内内容溢出时自动触发单列垂直滚动。

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