必须同时设置 html 和 body 的 height: 100% 才能使子元素高度生效，否则因父级 height: auto 导致 height: 100% 计算为 0px；flex 子项应避免 height: 100%，改用 flex: 1 实现拉伸；100vh 在滚动、ios safari、fixed 头部等场景易出问题，不如百分比链稳定。
因为浏览器根本算不出“100% 等于多少像素”——只要父容器的 computed height 是 auto，height: 100% 就等于 100% × 0px = 0px，子元素直接塌缩。
html 和 body 必须同时设 height: 100%
body 的父元素是 html，而 html 默认 height: auto。只写 body { height: 100% }，等于让浏览器算 “100% × auto”，结果就是 0px。
- 必须同时写：
html, body { height: 100%; margin: 0; padding: 0; } - 某些 CSS reset（如 Normalize.css）会悄悄把
html高度重置为auto，得手动覆盖 - 用开发者工具点开
body→ “Computed” 面板 → 若height显示auto，说明链路在html这一级就断了
Flex 容器里写 height: 100% 反而禁用拉伸
Flex 子项默认靠 align-items: stretch 撑满交叉轴高度，但这个行为极易被覆盖：一旦子项声明了 height: 100%，浏览器就认为你手动接管高度控制，会主动忽略 stretch。
- 更可靠的做法是删掉所有
height: 100%和min-height: 100%，改用：.item { flex: 1; } -
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，从 0 开始拉伸吃剩余空间 - 若父容器是
flex-direction: column且有固定高头部/底部，中间区域加flex: 1即可自动填满 - 某些 UI 库（如 Ant Design）会给子项注入
min-height: 0，这会卡住拉伸，需显式覆盖为min-height: auto
100vh 看似简单，实际在嵌套和滚动场景下容易溢出
100vh 绕过了百分比链路，直接取视口高度，所以写上去立刻“见效”。但它绑定的是视口，不是父容器，在真实项目里常翻车：
- 放在
overflow: auto的滚动区域里，100vh会让子元素撑出该容器，脱离滚动上下文 - iOS Safari 地址栏收起/展开时，
vh值重算，页面突然跳动 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（Cmd +），
vh不随布局缩放，而百分比链下的height: 100%更稳定
真正容易被忽略的，是没打开开发者工具逐层点开看
你以为链路通了，其实 html 或某层 .wrapper 的 computed height 仍是 auto。验证方法非常直接：选中目标元素 → 切到 “Computed” 面板 → 看每一层父级的 height 是否为具体数值（如 720px）。只要出现 auto，就是断点——它不看你写了多少层 height: 100%，只认当前父级的计算值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
