Grid子元素height: 100%无效是因为.grid-container的computed height为auto，导致无法计算百分比基准；必须确保从html、body到各层父容器均显式设高（如height: 100%或100vh），且避免中断包含块的布局模式。
Grid子元素的height: 100%无效，不是你写错了，是.grid-container自身computed height为auto——浏览器根本算不出“100%等于多少像素”，直接忽略该声明。
为什么grid-template-rows: 1fr救不了height: 100%
1fr分配的是“容器的可用高度”，但若容器本身height是auto，它的可用高度就是0。此时grid-template-rows: 1fr 2fr分到的仍是0px，子项再写height: 100%也还是0px。
-
1fr不创造高度，只分配已有高度；它依赖容器先有明确像素高（如height: 500px或height: 100vh） - 即使子项设了
align-self: stretch（Grid默认行为），也无法拉伸进一个“不存在的高度空间” - 用开发者工具选中
.grid-container→「Computed」→ 若height显示auto，就确认是根源
必须逐层检查的父级高度链
从目标子元素往上查，只要任意一层是height: auto，整条链就断了。最常漏掉的三处是：
-
html和body必须同时设height: 100%（只设body没用，因为body的100%要参照html） - 中间所有包裹容器（如
.wrapper、.page、.layout）都得显式设高，不能只靠内容撑开 - 避免父级用了
display: inline、display: table-cell或float——这些会让它失去“包含块”资格，中断高度继承
绝对定位子项的height: 100%为什么总按视口算
Grid子项加了position: absolute，就脱离Grid流，它的height: 100%不再参照.grid-container，而是找最近的非static定位祖先。找不到时，fallback到视口——你写的height: 50%实际是50vh。
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具选中该绝对定位元素 →「Computed」→ 看
height值：若是0px或auto，说明包含块没生效 - 修复方式：给
.grid-container加position: relative+height: 100vh（比height: 100%更稳） - 更推荐绕过高度链：
top: 60px; bottom: 20px;，语义清晰且不受父级高度波动影响
比height: 100%更可靠的替代方案
百分比高度本质脆弱，依赖整条链路畅通。真实项目中，优先考虑以下更鲁棒的方式：
- Grid轨道层约束：想让某行“至少200px”，直接写
grid-template-rows: minmax(200px, 1fr)，别靠子项min-height - 视口单位起步：
.grid-container { height: 100dvh; }（dvh比vh更稳，适配iOS地址栏动态变化） - Flex嵌套兜底：若Grid容器包在Flex里，确保父Flex项有
flex: 1并清除min-height: 0干扰 - Safari 14–15.6兼容：即使写了
height: 100vh，子项仍可能不拉伸，可加min-height: 0强制触发
真正容易被忽略的，是没打开开发者工具逐层点开看computed height——你写的每一条height: 100%，都只对它的**直接父元素**有效，而那个父元素是否真的有高，只能靠「Computed」面板验证。
