height: 100% 在子元素上不生效的根本原因是父元素高度为 auto 时无计算依据，导致浏览器无法解析百分比值；必须确保父元素具有可计算高度，如显式 height、vh 单位或完整高度链路。
为什么 height: 100% 在子元素上不生效
根本原因是：CSS 百分比高度（height: 50%、height: 100% 等）只对「有明确计算依据」的父容器起作用。如果父元素高度是 auto（默认值），浏览器无法算出“100%”到底等于多少像素，于是直接忽略该声明，退回到 height: auto 行为。
常见现象包括：
- 子元素写了
height: 100%，但实际高度为 0 或仅包裹内容 - Flex 或 Grid 容器里的子项设了百分比高度，却没反应
- 嵌套多层后，某一层父元素漏设高度，导致下方所有百分比高度失效
必须确保父元素有「可计算的高度」
所谓“可计算”，是指父元素高度不能是 auto，而需满足以下任一条件：
- 显式设置了固定值：
height: 400px、min-height: 300px（注意：min-height不触发百分比计算） - 设置了基于视口的单位：
height: 100vh、height: 50vh - 父元素自身也依赖更上层的百分比高度，且整条链路最顶层有确定高度（比如
html, body { height: 100% }） - 父元素是 Flex 容器且设了
align-items: stretch（默认），同时自身高度已确定
典型可靠写法：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
}
.container {
height: 100%;
}
.child {
height: 50%;
}
Flex/Grid 布局中容易忽略的陷阱
即使用了 Flex 或 Grid，子元素的百分比高度依然受制于父容器是否具有确定高度。Flex 容器不会自动赋予子项可计算高度上下文。
-
display: flex的父容器若没设height，其子项的height: 100%仍无效 -
align-items: stretch只会让子项拉伸填满交叉轴，但前提是主轴方向（即高度方向）已有尺寸 - Grid 中，
grid-template-rows: 1fr可以提供隐式高度上下文，但grid-auto-rows不行
安全做法：在 Flex/Grid 父容器上加 height: 100% 或 min-height: 100vh，再配合 html, body { height: 100% }。
用 vh 替代 % 是更稳妥的选择吗
是的，多数场景下 height: 100vh 比 height: 100% 更直接可靠，因为它不依赖父级高度计算链，而是直接基于视口。
- 适合全屏模块、登录页、单页应用根容器等需要撑满可视区的场景
- 注意：
100vh包含地址栏/工具栏高度（Safari iOS 早期版本有偏差），可能造成滚动条或截断；可用100dvh（动态视口高度）替代，但需检查兼容性 - 如果容器需随内容自适应，又想保留百分比逻辑，必须老老实实补全高度链路——没有捷径
真正难的不是写对一行 height，而是意识到：CSS 百分比高度从来不是“相对于父元素当前渲染高度”，而是“相对于父元素的 height 计算值”——这个值如果没被显式设定，就不存在。
