height: 100% 失效的根本原因是父元素高度未明确，导致浏览器无法计算百分比基准；需确保 html、body 及中间所有父元素均有明确高度（如 height: 100% 或 height: 100vh），或改用 flex: 1 等更可靠的布局方式。
height: 100% 没生效，不是你漏写了分号或拼错了单词，而是浏览器根本没算出“100% 等于多少像素”——它需要一个明确的、可继承的高度源头，而这个源头往往在 html 和 body 就断了。
为什么父元素 height: auto 时 height: 100% 直接变成 0px
浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（块级默认值），那子元素的 100% × auto 就等于 0px，结果就是视觉上塌缩或完全不可见，而不是“没反应”。
- 常见现象：
.content写了height: 100%，但只显示一行文字高；开发者工具里 Computed →height显示auto而非具体数值 -
min-height: 500px不等于height: 500px：父元素只有min-height没有height，子元素height: 100%依然无效 - 某些 CSS reset（如 Normalize.css）会悄悄把
html的height重置为auto或0，导致你写了body { height: 100% }却白搭
怎么快速定位哪一层高度链断了
别猜，直接打开浏览器 DevTools，选中目标元素，切到「Computed」面板，拉到底部看 height 值：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 如果是
auto，说明包含块没传下高度，往上逐层点开父节点继续查 - 如果是具体像素（如
720px）或视口单位（如100vh），才说明这一层有基准可依 - 常见断点位置：
html或body没设height: 100%；中间某层用了display: inline、display: table-cell、float或position: absolute，导致它无法作为有效包含块
Flex 容器里写 height: 100% 为什么还是不生效
Flex 容器本身默认 height: auto，它只负责排列，不自动提供高度上下文。哪怕你看到它“撑开了”，只要 Computed → height 是 auto，子项的 height: 100% 就无从计算。
- 不要同时写
height: 100%和flex: 1：语义冲突，浏览器可能忽略其中一个；优先用flex: 1（等价于flex: 1 1 0），它从0开始拉伸吃剩余空间 - UI 框架常给子项加
min-height: 0，这会卡住align-items: stretch行为，需显式覆盖为min-height: auto - 父容器是
flex-direction: column且有固定高 header/footer 时，中间区域加flex: 1即可自动填满，不用碰height
100vh 看似简单，但实际场景容易翻车
height: 100vh 绕过了百分比链路，直接绑定视口高度，所以写上去立刻“见效”。但它不认父容器，只认屏幕，真实项目里常出问题：
- iOS Safari 地址栏收/放时，
vh值重算，页面突然跳动 - 放在
overflow: auto的滚动区域里，100vh会让子元素溢出该区域，而不是填满它 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（
Ctrl +/Cmd +），vh不随布局缩放，而百分比链路下的height: 100%更稳定
真正稳的替代方案是 flex: 1 和显式设置 min-height: 0，尤其是嵌套 Flex 或 Grid 场景下——高度链一旦断裂，修复成本远高于一开始用对布局方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
