纯CSS实现头尾固定、中间自适应占满剩余空间的布局方案咨询

纯CSS实现方案 #

方案1：Flexbox修正版 #

你之前的Flexbox方案出现footer被挤走的核心原因是flex容器的子项默认min-height: auto，会优先适配内容高度导致容器被撑开，只需要调整中间内容区的规则即可，完整实现代码如下：

/* 最外层容器 */
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
/* 头部、底部无需固定高度，自适应内容 */
.page-header, .page-footer {
  flex-shrink: 0; /* 防止头尾被压缩 */
}
/* 中间内容区 */
.page-body {
  flex: 1; /* 占满剩余空间 */
  min-height: 0; /* 覆盖默认min-height: auto，允许内容超过时不撑开外层容器 */
  overflow-y: auto; /* 内容超过时内部滚动，不挤压头尾位置 */
}

该方案完全适配头尾高度不固定的场景，内容少的时候中间区域自动占满剩余空间，内容多的时候中间区域内部滚动，不会改变头尾的固定位置。

方案2：CSS Grid方案（更简洁） #

用Grid实现逻辑更直观，代码量更少：

.page-container {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* 头尾高度自适应内容，中间区域自动占满剩余空间 */
  margin: 0;
  padding: 0;
}
.page-body {
  overflow-y: auto; /* 内容超过时内部滚动 */
}

Grid的1fr单位会自动分配容器剩余空间，无需额外处理收缩规则，兼容性覆盖所有现代浏览器，是更推荐的实现方式。

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