height: 100% 失效是因为父容器高度为 auto 导致无法计算，需从 html、body 起逐层设 height: 100% 或具体值，并避免 display: inline/table-cell/float 等破坏包含块的样式。
为什么 grid 容器设了 height: 100% 却没撑开
因为 height: 100% 不是“占满屏幕”，而是“占满父容器的计算高度”。如果父容器高度是 auto（默认值），浏览器根本算不出 100% 对应多少像素，这个设置就直接被忽略——grid 容器退化为内容撑开的高度，哪怕里面只有一行文字。
哪些父级必须显式设高才能让 height: 100% 生效
必须从根往下逐层确认，只要其中一层是 auto，整条链就断了：
-
html和body必须同时设height: 100%—— 只设body没用，html是它的父级，不设高，body的 100% 就无源可溯 - 中间所有嵌套容器（比如
.wrapper、.content）都得设height: 100%或具体像素值 - 检查是否用了
display: inline、display: table-cell或float—— 这些会让父容器无法作为有效的“包含块”，导致百分比高度失效 - 用开发者工具点开目标
grid容器，看「Computed」面板里的height是不是具体数值；如果是auto，说明某层父级没传下来高度
grid 里 1fr 行不占剩余空间，光设 height: 100% 还不够
1fr 的“剩余空间”只基于其直接父级 grid 容器的可用高度。即使你给它设了 height: 100%，若该容器本身没有明确高度上下文（比如父级是 auto），那它实际高度仍是内容高度，1fr 就没空间可分。
- 典型场景：
.profile-card { height: 255px; }→.profile-grid { display: grid; grid-template-rows: 150px 1fr; }，但.profile-grid没设height，结果第二行塌缩 - 修复：给
.profile-grid加height: 100%，并确保.profile-card是它的直接父级且高度已固定 - 更稳方案：改用
flex: 1替代height: 100%（当父级是 Flex 容器时），或在 Grid 容器上加min-height: 0配合height: 100%，防止子项拉伸干扰
用 100vh 替代 height: 100% 的真实代价
100vh 看似简单，但它和视口强绑定，脱离父容器约束，在嵌套或动态场景下反而更难控：
- iOS Safari 地址栏收起/展开时，
vh值会重算，布局跳动明显 - 如果
grid容器嵌套在overflow: auto的滚动区里，100vh会让它溢出该区域，而不是填满父容器 - 页面有
position: fixed头部时，100vh仍按完整视口算，常导致底部留白或遮挡 - 真正需要“填满父容器”的场合（如 Grid 子项、Flex 区域），
100vh会破坏布局层级，此时必须回归高度继承链
最常被忽略的，不是怎么写 CSS，而是没打开开发者工具，逐层点开父元素看「Computed height」是不是你预期的数值。只要其中一层是 auto，整条链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
