本文详解如何使用 fr 单位替代百分比定义 grid 行高，配合 gap 实现无滚动、跨设备一致的全高布局，彻底解决因 height: 100% 与 gap 冲突导致的溢出问题。
本文详解如何使用 fr 单位替代百分比定义 grid 行高，配合 gap 实现无滚动、跨设备一致的全高布局，彻底解决因 height: 100% 与 gap 冲突导致的溢出问题。
在构建全屏响应式布局时，开发者常试图用 height: 100% + 百分比行高（如 grid-template-rows: 30% 70%）来划分空间。但这种写法在 CSS Grid 中存在根本性缺陷：百分比行高在存在 gap 时无法准确参与可用高度的分配，因为 gap 是额外添加的间距，不被计入百分比计算的“容器内尺寸”，最终导致总高度超出 100vh，触发垂直滚动条——这正是你在 Windows（Firefox/Edge）和 Linux 系统下观察到行为不一致的根源。
正确的解法是完全摒弃百分比，改用 fr（fractional unit）单位定义网格轨道。fr 是 Grid 布局专属的弹性单位，它基于容器的剩余可用空间进行分配，并自动将 gap 纳入整体空间规划，确保所有轨道与间隙之和严格等于容器高度。
以下为推荐实现方案：
body, html {
height: 100%;
margin: 0;
}
.grid-container {
display: grid;
/* ✅ 使用 fr：3fr + 7fr = 10份，等价于 30% / 70%，但可容纳 gap */
grid-template-rows: 3fr 7fr;
grid-template-columns: 1fr 1fr;
gap: 10px; /* 10px 间隙将被自动从总高度中扣除 */
width: 100%;
height: 100%; /* 此处 100% 指父容器（html/body）的 100% 高度 */
}
.grid-container button {
padding: 10px;
}
.console {
grid-column: span 2; /* 横跨两列 */
color: #F12;
background-color: #123;
/* ❌ 删除 height: 98.5% 或 calc() —— fr 已保证其占满分配空间 */
}对应 HTML 保持简洁：
立即学习“前端免费学习笔记（深入）”；
<div class="grid-container"> <button>Button 1</button> <button>Button 2</button> <div class="console">Textoutput here...</div> </div>
✅ 关键优势说明：
- 3fr 7fr 明确表达比例关系，语义清晰，且不受 gap 干扰；
- 浏览器会先预留 10px 的 gap，再将剩余高度按 3:7 分配给两行；
- .console 不再需要任何 height 设置——它天然占据第二行全部分配空间；
- 兼容所有现代浏览器（Chrome、Firefox、Edge、Safari），在 Windows、Linux、macOS 下行为完全一致；
- 无需依赖 vh 单位（避免移动端地址栏缩放导致的视口高度抖动问题）。
⚠️ 注意事项：
- 确保 html 和 body 的 height: 100% 已正确继承（如示例所示），否则 .grid-container 的 height: 100% 将失效；
- 若需支持旧版 Safari（caniuse.com: css-grid-gap）；
- 避免在 .console 等网格项上设置 margin 或 border（除非已通过 box-sizing: border-box 控制），否则可能引入额外尺寸偏差。
总结：Grid 布局中，fr 是定义比例高度的唯一可靠单位；放弃 height + % 的组合思维，拥抱 fr 与 gap 的原生协同机制，即可一劳永逸地实现跨设备、无滚动、像素级精准的全高网格布局。
