如何解决CSS Grid布局页面缩放到最大时footer下方出现空白的问题

修复后完整代码 #

CSS代码

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

.grid {
  display: grid;
  /* 保留原有的1:4:1列比例 */
  grid-template-columns: 1fr 4fr 1fr;
  /* 明确定义三行结构：头部自适应高度、中间内容区占满剩余空间、页脚自适应高度 */
  grid-template-rows: auto 1fr auto;
  background-color: #8b9dc3;
  height: 100vh;
}

.box1 {
  background-color: #3b5998;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  z-index: 2;
  position: sticky;
  top: 0;
}

.box2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  position: sticky;
  top: 0;
  height: 100%;
}

.box3 {
  background-color: #ffffff;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  /* 仅内容区支持滚动 */
  overflow-y: auto;
  min-height: 0;
}

.box4 {
  align-self: stretch;
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  position: sticky;
  top: 0;
  height: 100%;
}

.box5 {
  background-color: #3b5998;
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  position: sticky;
  bottom: 0;
}

HTML代码无需修改，沿用原有结构即可。

核心修改说明 #

• 用grid-template-rows: auto 1fr auto替代原来模糊的行范围定义，行高计算逻辑清晰，从根源解决缩放时底部出现多余空白的问题
• 移除全局overflow: hidden配置，改为仅给内容展示区box3设置纵向滚动，匹配交互需求
• 删除原有grid-row: 2/12、grid-row: 2 / max这类兼容性差、逻辑模糊的行范围定义，和明确的三行模板一一对应
• 给需要固定的box1、box2、box4、box5添加sticky定位，设置对应吸附阈值，实现滚动时保持固定的效果

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