当在 CSS Grid 布局中为子网格容器错误地设置 position: absolute 时，会脱离文档流，导致其高度无法响应父级 grid row 的百分比定义（如 25%），进而引发逐层塌缩——越靠后的网格高度越小。移除该声明并恢复正常文档流即可彻底解决。
当在 css grid 布局中为子网格容器错误地设置 `position: absolute` 时，会脱离文档流，导致其高度无法响应父级 grid row 的百分比定义（如 `25%`），进而引发逐层塌缩——越靠后的网格高度越小。移除该声明并恢复正常文档流即可彻底解决。
在您提供的代码中，.grids 类（即 #grid1–#grid4）被赋予了 position: absolute，这是造成高度异常的核心原因。绝对定位元素会脱离常规文档流，不再参与父容器（#gridcontainer）的 grid track 分配计算；此时 height: 100% 失去参照基准（因父元素无显式高度约束或自身已脱离布局上下文），浏览器无法正确解析百分比高度，最终表现为：首项 #grid1 偶尔“侥幸”占满，而后续项因渲染顺序、继承链断裂等原因高度持续衰减（如 #grid4 仅剩约 10%）。
✅ 正确做法是完全移除 .grids { position: absolute }，让所有子网格作为标准 grid items 参与布局：
#gridcontainer {
display: grid;
grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: 100%;
height: 100vh; /* 推荐使用 vh 确保视口高度基准 */
width: 100%;
}
.grids {
/* 删除 position: absolute */
display: grid;
grid-column: 1;
grid-template-rows: 1fr 1fr; /* 推荐用 fr 替代 50%/50%，更健壮 */
grid-template-columns: 100%;
height: 100%; /* 此时 height: 100% 有效，因父行高明确 */
}
.element1 {
grid-row: 1;
height: 100%;
}
.element2 {
grid-row: 2;
height: 100%;
}⚠️ 关键注意事项：
- 避免滥用 position: absolute 在 Grid 子项中：除非有明确覆盖/悬浮需求，否则它会破坏 grid 的尺寸传递机制；
- 确保高度可继承链完整：#gridcontainer 应有明确高度来源（如 height: 100vh 或父容器设 height: 100% 并向上追溯至 html, body { height: 100% }）；
- 优先使用 fr 单位替代百分比：grid-template-rows: 1fr 1fr 1fr 1fr 比 25% 25% 25% 25% 更可靠，不受 margin/padding/box-sizing 等干扰；
- 验证 box-sizing：确保全局 * { box-sizing: border-box }，防止内边距意外压缩内容区。
修复后，四个 .grids 将严格均分容器高度，每个子网格内的 .element1 和 .element2 也将稳定各占 50% 高度，实现真正可控的嵌套网格布局。
立即学习“前端免费学习笔记（深入）”；
