height: 100% 失效的根本原因是父容器缺乏高度上下文，即父元素高度为 auto 时无法提供计算基准；必须确保 html、body 及所有中间父级均显式设置 height: 100%，或改用 flex/grid 布局、100vh 等替代方案。
height: 100% 不起作用，根本原因不是你写错了，而是父容器没给“高度上下文”——浏览器连父元素高多少都不知道，自然算不出 100% 是多少像素。
父元素 height 为 auto 时，子元素 height: 100% 必然失效
块级元素默认 height: auto，即高度由内容撑开。此时子元素写 height: 100%，相当于问：“请给我父元素高度的 100%”，但父元素回答：“我也不知道我多高”。结果就是浏览器直接忽略该声明，子元素退回到 height: auto（常表现为“看不见”或“只有一行高”）。
- 常见错误现象：
.container { height: 100%; }却完全不占高，检查发现其父级没设高度 - 哪怕只漏一层也不行：html → body → .wrapper → .container，任意一级是
height: auto，链就断了 -
min-height不等于height：父元素设min-height: 500px但没设height，子元素height: 100%仍无效
html 和 body 必须显式设 height: 100%
这是最常被跳过的起点。因为 和 默认不占满视口高度，它们只是“包裹内容”的容器，高度随子内容伸缩。
- 必须加这段重置：
html, body { margin: 0; padding: 0; height: 100%; } - 缺
margin: 0; padding: 0可能导致实际可用高度小于 100%，尤其在旧版 Safari 中 - 仅设
body { height: 100% }不够——body的 100% 是相对于html的，而html默认没高度
Flex 或 Grid 布局可绕过高度继承链
当你不想逐层写 height: 100%，或者父容器高度本就不固定（比如顶部有动态导航栏），用现代布局更可靠。
- 父容器设
display: flex后，子元素height: 100%通常能生效（因 flex 容器生成了明确的高度上下文） - 更推荐用
flex: 1替代height: 100%：.parent { display: flex; flex-direction: column; height: 100vh; }<br>.main { flex: 1; } - Grid 更适合分区场景：
.parent { display: grid; grid-template-rows: auto 1fr auto; }<br>.main { /* 自动占满中间 1fr 行 */ }
用 100vh 替代 100% 要小心溢出和移动端抖动
height: 100vh 看似简单，但它基于视口（viewport）而非父容器，容易在移动端出问题。
- iOS Safari 中，地址栏收放会改变
vh值，导致页面“跳动” -
100vh是固定值，内容超长时无法自适应撑高；而min-height: 100vh+height: auto更安全 - 混用
min-height: 100vh和height: 100%会导致后者失效——min-height不参与百分比计算基准
真正卡住人的从来不是语法，而是“谁的高度决定了谁的 100%”。别猜，打开开发者工具，一层层看 computed height，从 开始查——只要某一级显示 height: auto，那就是断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
