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 计算值”——这个值如果没被显式设定，就不存在。