height: 100%失效是因为父元素computed height为auto，导致计算结果为0px；需用开发者工具逐层检查computed面板中的height值，确保html、body及所有中间父容器均有明确高度，或改用flex: 1替代。
height: 100% 没效果，不是写错了，而是浏览器压根没算出“100%”对应多少像素——它只看直接父元素的 computed height，如果那个值是 auto，结果就是 0px。
为什么 html 和 body 都设了 height: 100% 还是不生效
因为链路断在了中间某一层。哪怕你写了 html, body { height: 100%; }，目标元素可能嵌套在 .layout → .main → .content 里，只要其中任意一层是 display: inline、float: left、position: absolute 或默认的 height: auto，子元素的 height: 100% 就会退化为 0px。
- 用开发者工具选中目标元素 → 切到 “Computed” 面板 → 拉到底找
height值：如果是auto，说明断点就在这层或它的某个父级 - 特别注意 UI 库（如 Ant Design、Vant）常给容器加
min-height: 0，这会阻止align-items: stretch生效，间接让height: 100%失效 -
margin: 0; padding: 0;必须和height: 100%一起写，否则 Safari 等浏览器可能因默认边距导致实际高度不足
Flex 容器里写 height: 100% 为什么还是空的
Flex 容器自身默认 height: auto，子项的 height: 100% 实际算的是 100% × 0px = 0px。这不是 bug，是规范行为。
- 别硬套
height: 100%，改用flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它从零开始拉伸，不依赖父容器有没有数值高度 - 若父容器是
flex-direction: column，且已有固定高头部/底部，中间区域加flex: 1就能自动填满 - 确保父容器是
display: flex或display: inline-flex；子项不能被框架悄悄加了min-height: 0，否则要手动覆盖为min-height: auto
该不该用 100vh 替代 100%
100vh 能绕过继承链，立刻见效，但它绑定的是视口，不是布局上下文，真实项目里容易翻车。
- iOS Safari 地址栏收起/展开时，
vh值重算，页面视觉跳动 - 若元素在
overflow: auto的容器内，100vh会让它溢出滚动区域 - 有
position: fixed头部时，100vh仍按完整屏幕算，常留白或遮挡 - 用户缩放页面（Ctrl+/Cmd+），
vh不随布局缩放，而百分比链下的height: 100%更稳定
真正卡住人的，从来不是“怎么写”，而是没打开开发者工具逐层确认 computed height —— 只要点开看一眼，90% 的问题当场定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
