CSS Grid布局中content行填充页面可用空间不生效问题排查

问题根源 #

Grid 中1fr分配的是网格容器自身的可用剩余空间，你当前作为网格容器的<body>元素默认高度由内容撑开，本身没有占满整个视口高度，自然没有多余空间分配给第三行的1fr，因此达不到预期效果。 #

修复方案 #

基础修复（保留现有HTML结构） #

首先给根元素<html>设置高度占满视口，同时调整<body>的盒模型避免高度溢出：

/* 新增根元素高度配置 */
html {
  height: 100%;
}

.body {
    margin: 0; /* 替换外边距为内边距，避免高度超出视口 */
    padding: 15px;
    box-sizing: border-box; /* 内边距纳入元素总高度计算 */
    min-height: 100%; /* 最小高度占满视口，内容超出时可自动撑开 */
    background: lime;
    display: grid;
    /* 直接把固定高度的间距行写死，比auto更可控 */
    grid-template-rows: auto 15px 1fr 15px auto;
}

/* 其余CSS保持不变 */
.headerRow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    background-color: #2196F3;
}

.footerRow {
    display: grid;
    grid-template-columns: auto auto;
    background-color: red;
}

优化方案（简化HTML结构） #

不需要额外添加空的占位元素实现间距，直接使用Grid的行间距属性即可，代码更简洁：

1. 删掉HTML中两个<div style="height: 15px;"></div>占位节点
2. 修改.body的CSS配置：

html {
  height: 100%;
}

.body {
    margin: 0;
    padding: 15px;
    box-sizing: border-box;
    min-height: 100%;
    background: lime;
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 15px; /* 自动在每行之间添加15px间距 */
}

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