height: 100% 失效是因为父元素高度为 auto，需 html、body 同时设 height: 100%；100vh 虽便捷但受视口变化影响，嵌套或固定定位时易出错；推荐 flex: 1 或配合 min-height: 0 使用。
为什么 height: 100% 在 div 上完全没反应
因为浏览器根本算不出“100%”是多少。它需要一个明确的数值作为基准，而这个数值必须从 html 开始一路向下传递。如果中间任何一个父元素（包括 html、body、section）的高度是 auto（默认值），那么子元素的 height: 100% 就会失效，退化为内容撑开的高度——哪怕内容只有一行字，它也只高那么一点。
html 和 body 必须显式设高
这是最常漏掉的一环。很多人只写了 body { height: 100% }，但忘了 html 是 body 的父元素，而它的默认高度也是 auto。没有它兜底，body 的 100% 就无源可溯。
-
html, body { margin: 0; padding: 0; height: 100%; }是最小必要配置 - 仅设
body高度无效；仅设html也不够，二者必须同时设置 - 如果用了 CSS reset 或 normalize，检查是否意外重置了
html或body的height
用 100vh 替代 height: 100% 的真实代价
100vh 看似一劳永逸，但它和视口高度强绑定，不随父容器变化，容易在移动端或缩放场景下出问题：
- 在 iOS Safari 中，地址栏收起/展开时
vh值会重算，导致布局跳动 - 如果目标元素嵌套在有滚动容器（如
overflow: auto的 div）里，100vh会让它溢出该容器，脱离预期布局流 - 当页面存在固定定位（
position: fixed）头部/底部时，100vh仍按完整视口算，可能遮挡或留白 - 真正需要“占满父容器”的场合（比如 flex 子项、grid 区域），
100vh反而破坏约束，此时必须回归百分比链
检查父级是否意外脱离文档流
即使 html 和 body 都设了 height: 100%，若中间某层用了 position: absolute 或 float，它就不再作为子元素的“包含块”，height: 100% 会重新找最近的定位上下文或初始包含块计算，结果往往还是 auto。
- 用浏览器开发者工具选中目标元素，看“Computed”面板里的
height是否显示为具体像素值；如果是auto，说明包含块未生效 - 检查父级是否设置了
display: inline或display: table-cell—— 这些 display 类型对百分比高度的支持极差 - Flex 容器子项用
flex: 1比height: 100%更可靠；Grid 容器中直接用grid-area或min-height: 0配合height: 100%才稳
实际开发中最容易被忽略的，不是怎么写 CSS，而是忘记打开开发者工具，逐层点开父元素看它们的“Computed height”到底是不是你预期的数值。只要其中一层是 auto，整条链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
