百分比高度失效的根源是“高度链断裂”，即从html到目标元素间任一父级的computed height为auto，导致浏览器无法计算100%对应像素值；必须显式设置各层高度（如height: 100vh或height: 100%）才能修复。
百分比高度失效的根源是“高度链断裂”
子项写 height: 100% 不生效，不是 Grid 本身有问题，而是浏览器根本算不出“100%”对应多少像素。CSS 规范要求：百分比高度必须基于一个**显式定义的高度值**（比如 height: 400px 或 height: 100vh），而不能基于 auto（内容撑开的高度）。只要从 html 到目标子项之间任一父级的 computed height 是 auto，整条链就断了。
常见断点包括：html 或 body 没设 height；中间某层用了 display: inline、float 或 position: absolute；Grid 容器自身没显式高度，仅靠内容撑开。
Grid 容器本身必须有明确高度上下文
即使你给 Grid 子项写了 height: 100%，如果它的直接父容器（即 Grid 容器）的 height 是 auto，那这个 100% 就无处落脚。Grid 的 1fr 行高依赖的是该容器的**可用高度**，不是“看起来有多高”。
-
.grid-container { display: grid; grid-template-rows: 100px 1fr; }—— 第二行塌缩，因为容器高度仍是auto - 必须加
height: 100%或min-height: 100vh到.grid-container上，且确保其父级已提供高度 - 用开发者工具检查
.grid-container的「Computed」→height：如果是auto，说明上层没传下来
嵌套 Flex 在 Grid 里时，子项高度更易失效
当 Grid 单元格内部又套了 display: flex，问题会叠加：Grid 项默认不拉伸（align-items: stretch 对空内容无效），Flex 容器又因无高度无法分配 flex: 1 空间。
- 给 Grid 单元格加
height: 100%或min-height: 0（前提是 Grid 容器已有高度） - Flex 容器上避免写
height: 100%—— 这会禁用align-items: stretch，改用flex: 1更可靠 - 某些 UI 框架会给元素加
min-height: auto，需手动覆盖为min-height: 0才能让flex: 1生效
旧版 Chrome（≤49）中百分比高度几乎必然失效
这些版本的 Blink 内核根本不把 flex: 1 或 Grid 容器撑开的高度当作有效参照，哪怕 computed 高度显示正常，height: 100% 仍退化为 auto。
- 唯一兼容方案：逐级硬写
height，例如html, body { height: 100% }+.layout { height: 100vh } -
min-height: 100vh无效 —— 百分比高度不认min-height作基准 - 优先用
flex: 1替代height: 100%，只要父容器是display: flex且自身高度非auto
真正容易被忽略的点是：height 链不是“有没有高度”，而是“有没有显式声明的、可计算的数值”。哪怕只写 height: 1px，也比不写强；而 height: auto 或未设置，就是彻底中断。调试时别只盯目标元素，要一级级往上查 computed height 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
