Grid子项height: 100%无效的根本原因是.grid-container自身高度为auto，导致100%×0px=0px；必须显式设置其height（如height: 100vh），且需排查中间父层是否因display、position等中断高度继承链。
Grid子项写height: 100%却没效果，不是你漏写了什么，是.grid-container自己根本没高度——浏览器连“100%等于多少像素”都算不出来，直接按0px渲染。
Grid容器必须有明确的height值，grid-template-rows不等于“给容器赋高”
grid-template-rows: 1fr 2fr只分配容器内部空间，不定义容器自身高度。如果.grid-container的computed height是auto（开发者工具里一眼可见），那所有子项的height: 100%就等于100% × 0px = 0px。
- 别指望
align-items: stretch能救——它只对无显式高度约束的子项生效；一旦子项写了height: 100%，就立刻切换为依赖父容器像素高度 -
min-height: 400px对height: 100%完全无效：它只认height，不认min-height - 常见错误配置：
.grid-container { display: grid; grid-template-rows: 1fr; }→ 缺少height声明，链路从第一层就断了
为什么html, body { height: 100% }还不够？中间父层可能悄悄断链
即使根级设了height: 100%，只要中间某一层用了display: inline、float、position: absolute或display: table-cell，它就失去“包含块”资格，导致高度继承中断。
- 用开发者工具逐层点开目标元素的父节点，在「Computed」面板看
height值：出现auto就是断点 - 尤其注意框架注入的样式，比如某些 UI 库默认给
html加height: auto，覆盖你的规则 -
.wrapper加了position: relative但没设height？它的子项height: 100%照样算出0px
绝对定位子项在Grid里更危险：包含块可能根本不是Grid容器
position: absolute元素的height: 100%不看DOM父级，而是找最近的非static定位祖先。如果.grid-container没加position: relative，或者加了但自身height仍是auto，那百分比就回退到视口——你写的height: 50%实际是50vh。
立即学习“前端免费学习笔记（深入）”；
- 修复优先级：先给
.grid-container加position: relative和明确height（如height: 100vh或height: 500px） - Safari 14–15.6有兼容问题：即使父级
height: 100vh，子项height: 100%仍可能被忽略；可临时加min-height: 0强制触发 - 更稳方案：放弃
height，改用top: 60px; bottom: 20px;——完全绕过高度继承链
嵌套Flex时失效风险叠加，flex: 1比height: 100%更可靠
Grid子项里再套Flex，height: 100%要连过两关：Grid容器得有高 → 子项得拉满 → Flex容器得有高 → Flex项才能height: 100%。任一环是auto，后面全归零。
- Grid子项内需滚动区域？优先用
flex: 1+min-height: 0，而不是height: 100% -
flex: 1从flex-basis: 0开始拉伸，吃掉剩余空间，不依赖父容器有没有显式height - 若必须用
height: 100%，确保父容器是display: flex或display: inline-flex，并手动覆盖min-height: 0（某些框架会注入min-height: 0压制拉伸）
真正容易被忽略的，不是怎么写CSS，而是没打开开发者工具逐层检查「Computed」里的height值——很多人反复调.grid-item，却漏掉了中间某个div因为display: inline或float，让整个高度链在第二层就彻底断了。
