为什么CSS Grid的百分比行高导致容器溢出-css教程-PHP中文网

百分比行高在grid中算不准是因为grid-template-rows的%基于容器content box高度计算，而gap不计入该高度却占空间，导致总高度超100%并触发滚动条；fr单位则基于扣除gap后的剩余空间分配，天然避免溢出。

为什么css grid的百分比行高导致容器溢出

百分比行高（%）在 Grid 中为何算不准

因为 grid-template-rows: 30% 70% 的百分比，是相对于网格容器的 content box 高度 计算的，而 grid-gap（或 gap）本身不计入这个高度——但它真实占空间。结果就是：30% + 70% = 100%，再加 gap 像素，总高度 > 100%，触发垂直滚动条。

fr 单位为什么能避免溢出

fr 是 Grid 原生弹性单位，它基于容器「扣除所有 gap 后的剩余可用空间」做分配，天然把 gap 排除在计算之外。比如 3fr 7fr 表示把 gap 扣完后的空间按 3:7 切分，不会多占一像素。

无需手动减去 gap 值，也不用 calc()
在 Firefox、Edge、Linux 等对 gap 渲染更严格的环境下表现一致
子项若没设 height，也不会因父级 % 失效而塌陷

常见错误写法与修复对照

以下代码在窄屏或有 gap 时极易溢出：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 30% 70%; /* ❌ 百分比 + gap → 溢出 */
  gap: 12px;
}

改成这样才可靠：

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 3fr 7fr; /* ✅ fr 自动扣 gap */
  gap: 12px;
}

删掉所有 height: X% 的行/列定义
不要混用 % 和 fr 在同一 grid-template-rows 里
如果某行需固定高度（如 header），写成 64px 3fr 7fr，fr 仍只分剩余空间

真正容易被忽略的一点

即使你用了 fr，如果网格容器本身高度来源不可靠（比如父级是 height: auto），100vh 或显式 height 仍得落到它身上——否则 fr 分的“剩余空间”就是 0。别只改 Grid 内部，先确认容器高度链是闭合的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！