根本原因是父级链路上存在height: auto的容器，导致子元素无法计算具体像素值；必须确保html、body及所有中间父容器均有明确高度（如height: 100vh或逐层height: 100%），否则100%无参照而失效。
百分比高度 height: 100% 无效，根本不是 CSS 写错了，而是浏览器压根算不出“100%”对应多少像素——它需要一个明确的、可继承的高度源头，而这个源头常常在 html 和 body 就断了。
父元素没高度，子元素的 height: 100% 就是空气
浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（默认值），那子元素的 100% 就无从下手，退化为内容撑开高度——哪怕你写了十层嵌套，只要中间某一层没设高，后面全白搭。
-
html是body的父元素，body是你所有容器的祖先；两者都必须显式设height: 100%，缺一不可 - 某些 CSS reset 或框架（如 Normalize.css）会重置
html或body的height，导致你写了body { height: 100% }却依然失效 - 用开发者工具选中目标元素 → 切到 “Computed” 面板 → 查看
height值：如果是auto，说明包含块没生效；如果是具体像素（比如720px），才说明链路通了
100vh 看似简单，但和滚动、缩放、固定定位一碰就出事
100vh 绕过了百分比链路，直接拿视口高度当基准，所以写上去立刻见效。但它绑定的是“当前视口”，不是“父容器”，在真实场景里容易翻车：
- iOS Safari 地址栏收起/展开时，
vh值会重算，页面突然跳动 - 父容器设了
overflow: auto，子元素用100vh会溢出该容器，脱离滚动上下文 - 页面有
position: fixed头部或底部时，100vh仍按完整屏幕算，可能遮挡内容或留白 - 用户缩放页面（Ctrl + / Cmd +），
vh不随布局缩放，但百分比链路下的height: 100%更稳定
Flex 容器里写 height: 100% 还是不生效？别硬刚，换 flex: 1
Flex 子项默认靠 align-items: stretch 拉伸，但这个行为会被 min-height: 0（常见于 UI 库重置样式）或 align-self: flex-start 干掉。此时再写 height: 100%，等于在无效上下文里叠 buff。
- 优先用
flex: 1：它主动参与主轴/交叉轴的空间分配，不依赖父级有没有“数值高度” - 若必须保留
height: 100%（比如内部要嵌套非 Flex 元素），则需组合设置：min-height: 0; align-self: stretch; - Chrome 72+ 起严格按规范处理
min-height，子项有文字时默认min-height= 内容最小高度，height: 100%不覆盖它——这是设计，不是 Bug
真正容易被忽略的，是没打开开发者工具逐层点开看
很多人卡在“为什么我明明写了 html, body { height: 100% } 还是不行”，其实问题常出在第三层：比如 main 或 .container 用了 display: inline、float 或 position: absolute，导致它不再是子元素的“包含块”，height: 100% 自动回退到初始包含块（通常是视口），结果又变成 auto。
动手前先打开 DevTools，从目标元素往上点，挨个看每一层的 “Computed → height”。只要有一层是 auto，就停在那里修——不是代码没写对，是那个节点没被正确纳入高度链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
