height: 100% 计算为 0px 是因父元素 computed height 为 auto，100% × auto = 0px；需确保 html、body 及各层父容器均有明确 height 或使用 flex: 1 等替代方案。
为什么 height: 100% 计算结果是 0px
浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（块级默认值），那子元素的 100% × auto 就等于 0px——不是“没反应”，而是真被渲染成 0 高度，视觉上塌缩或消失。
- 常见现象：
.content写了height: 100%，但只显示一行文字高；DevTools 的 Computed 面板里height显示auto而非像素值 -
min-height: 500px≠height: 500px：父元素只有min-height没有height，子项的height: 100%依然无效 - 宽度
width: 100%通常能生效，是因为块级元素默认占满父宽，有天然上下文；高度没有这个默认行为
怎么快速定位哪一层高度链断了
别猜、别试、别堆 hack。打开 DevTools，选中目标元素 → 切到「Computed」面板 → 拉到底部看 height 值：
- 如果是
auto，说明这一层的包含块没传下高度，往上点父节点继续查 - 如果是具体像素（如
428px）或100vh，说明链路通了，问题在更下层或被其他样式覆盖 - 重点盯：
html→body→ 最外层布局容器（比如.app或#root）→ 目标父容器 - 注意：
position: absolute元素的包含块可能跳过视觉父级，回退到html或视口——得顺着包含块逻辑往上找，不是只看 DOM 树
Flex 容器里写 height: 100% 为什么反而失效
Flex 容器默认 height: auto，它只负责排列，不自动提供高度上下文。哪怕你看到它“撑开了”，只要 Computed → height 是 auto，子项的 height: 100% 就无从计算。
- 嵌套 Flex 时，中间层容器要加
min-height: 0，否则默认min-height: auto会卡住内部flex: 1 -
align-self: flex-start或显式min-height: 0会干掉默认的align-items: stretch行为，此时再写height: 100%也无效 - 不要同时写
height: 100%和flex: 1：语义冲突，浏览器可能忽略其中一个 - 某些 UI 框架（如 Ant Design、Chakra UI）默认给子项加
min-height: 0，需显式覆盖为min-height: auto才能恢复拉伸
为什么 flex: 1 比 height: 100% 更可靠
flex: 1 不依赖父级已有高度，而是从 flex-basis: 0 开始拉伸吃剩余空间，天然适配动态内容和多层嵌套。
- 父容器必须是
display: flex且有明确方向（flex-direction: column或row） - 中间区域想填满，直接写
flex: 1，不用碰height；Grid 场景下优先用grid-template-rows: auto 1fr auto -
100vh虽绕过链路，但 iOS Safari 地址栏收/放时会重算，overflow: auto区域内会溢出，position: fixed头部下常留白——这些坑比调试百分比链还难控 - 真正容易被忽略的是：某些 CSS reset（比如 Normalize.css）会悄悄把
html的height重置为auto或0，导致你写了body { height: 100% }却白搭
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
