Grid子项height:100%失效的根本原因是Grid容器自身高度为auto，需确保整条父级链（html、body及所有中间容器）均设height:100%，或改用minmax()、top/bottom等更可靠方案。
height: 100% 在 Grid 子项里不生效，不是子项写错了，是 Grid 容器自己没高度——浏览器连“100% 对应多少像素”都算不出来，直接退化为 auto。
Grid 容器必须有显式 height 才能撑起子项百分比
Grid 布局本身不自动赋予容器高度，grid-template-rows: 1fr 2fr 只分配内部空间，不解决“容器多高”这个前提问题。只要 .grid-container 的 computed height 是 auto（开发者工具里一眼可见），所有子项的 height: 100% 都等于 100% × 0px = 0px。
-
height: 100%必须整条链路畅通：html、body、所有中间父容器（比如.wrapper、.page）都得设height: 100%，缺一不可 - 避免用
min-height代替height：height: 100%完全不认min-height: 400px，哪怕父级视觉上撑开了 - 慎用
display: inline、float、display: table-cell等样式，它们会让父容器失去“包含块”资格，中断高度继承 - 临时加
border: 1px solid red到.grid-container，看它是否视觉塌陷成一条线——这是最直观的诊断方式
为什么 1fr 和 height: 100% 不能互相救场
1fr 不是“让行高占满容器”，而是“把容器的可用高度按比例分”。如果容器自身 height 是 auto，那它的“可用高度”就是 0，1fr 行自然分不到空间，第二行直接塌缩。
-
grid-template-rows: 1fr+height: 100%子项 ≠ 自动填满：子项仍需依赖容器有明确像素高 - 想让某行“至少 200px”，优先写
grid-template-rows: minmax(200px, 1fr)，约束放在轨道层，比靠子项min-height更可靠 - Flex 嵌套在 Grid 子项里会叠加失效风险：
Grid容器没高 → 子项没高 → Flex 容器没高 → Flex 项的height: 100%还是 0
绝对定位子项在 Grid 里更容易失效
Grid 子项加了 position: absolute，就脱离 Grid 布局流，它的 height: 100% 不再参照 Grid 容器，而是找最近的非 static 定位祖先。如果没找到，就 fallback 到视口——你写的 height: 50% 可能实际是 50vh。
- 用开发者工具选中该绝对定位元素 →「Computed」→ 看
height值：如果是0px或auto，说明包含块断了 - 修复优先级：给最近的定位祖先（比如
.grid-container）加position: relative; height: 100vh或min-height: 100vh - 更稳方案：放弃
height，改用top: 60px; bottom: 20px;，完全绕过高度继承链 - Safari 14–15.6 有兼容问题：即使父级
height: 100vh，子元素height: 100%仍可能被忽略；可加min-height: 0强制触发继承
别只盯着 Grid 容器，先查 computed height
最常被忽略的不是怎么写 CSS，而是没打开开发者工具逐层点开看 height 值。很多人卡在“我明明写了 html, body { height: 100% }”，结果还是无效——问题往往出在第三层：比如 .main 用了 display: table-cell，或 .content 加了 position: absolute，导致它不再是子元素的包含块。
- 从目标元素往上点，直到找到第一个
height: auto的节点——那就是断点 -
100vh虽快但易翻车：嵌套滚动区里会溢出、fixed 头部下留白、iOS 地址栏收起时跳动、用户缩放时失准 - 真正需要“填满父容器”的场景（比如弹窗内容区、侧边栏滚动区），必须回归高度继承链，
100vh反而破坏层级关系
复杂点在于，失效往往不是单一层的问题，而是多层样式叠加后隐性中断——比如某个 UI 库重置了 min-height，或一个 transform 触发了新层叠上下文，都会让父容器悄然失去包含块资格。动手前，先打开开发者工具，从 computed height 开始查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
