本文详解如何使用 CSS Grid 的 fr 单位替代百分比，结合合理高度重置与 gap 处理，实现跨设备、跨浏览器一致的全高布局，彻底避免因 grid-gap 和百分比计算导致的意外溢出与滚动条。
本文详解如何使用 css grid 的 `fr` 单位替代百分比，结合合理高度重置与 gap 处理，实现跨设备、跨浏览器一致的全高布局，彻底避免因 `grid-gap` 和百分比计算导致的意外溢出与滚动条。
在构建响应式全屏布局（如控制台界面、仪表板或工具型应用）时，开发者常试图用 height: 100% 配合 grid-template-rows: 30% 70% 实现上下分区。但实践中会频繁遇到：即使内容未超限，页面仍出现垂直滚动条——尤其在 Firefox、Edge 或 Linux 系统下表现不一。根本原因在于 CSS Grid 中百分比行高（%）是相对于网格容器的 content box 高度计算的，而 gap 本身不计入该高度，却额外占用空间，导致总占用高度 > 100%，触发溢出。
✅ 正确解法：弃用百分比，改用 fr 单位定义行比例，并移除子项的显式 height 声明。
fr（fraction）是 Grid 布局专属弹性单位，它基于容器可用剩余空间进行分配，天然兼容 gap——浏览器会在扣除所有 gap 后，将剩余空间按 fr 比例划分给各行。这意味着 3fr 7fr 精确对应 30% : 70% 的视觉比例，且无需手动减去 gap 像素值，也无需 calc() 折损可维护性。
以下是优化后的完整代码：
立即学习“前端免费学习笔记（深入）”；
body, html {
height: 100%;
margin: 0;
}
.grid-container {
display: grid;
grid-template-rows: 3fr 7fr; /* ✅ 比例分配，自动适配 gap */
grid-template-columns: 1fr 1fr;
gap: 10px; /* ✅ gap 被自动纳入布局计算 */
width: 100%;
height: 100vh; /* ✅ 推荐用 100vh 替代 100%（更可靠） */
}
.grid-container button {
padding: 10px;
}
.console {
grid-column: span 2;
color: #F12;
background-color: #123;
/* ❌ 删除 height: 98.5% 或 calc() —— 它会破坏 fr 的弹性分配 */
}<div class="grid-container"> <button>Button 1</button> <button>Button 2</button> <div class="console">Textoutput here...</div> </div>
⚠️ 关键注意事项：
- 永远不要给 fr 分配的网格项设置 height: 100% 或固定高度：这会强制其脱离弹性流，覆盖 Grid 的空间分配逻辑，极易引发溢出；
- 优先使用 100vh 而非 100% 设置容器高度：html/body 的 100% 依赖父级高度，在某些文档流中可能失效；100vh 直接锚定视口，语义清晰、兼容性更佳；
- gap 是“免费”的：它不消耗 fr 单位空间，而是从容器总尺寸中预留——因此 3fr 7fr + gap: 10px 在 100vh 容器中必然严格占满，无滚动风险；
- 若需内容区内部滚动（如 .console 内容过长），请仅对其设置 overflow-y: auto 和 height: 100%（此时 height 作用于 Grid 分配后的实际空间，安全可控）。
总结：Grid 布局的本质是空间分配系统，而非绝对定位。拥抱 fr、信任浏览器对 gap 的原生处理、剥离冗余的高度干预——这才是实现真正健壮、跨平台全高 Grid 的专业实践。
