height: inherit 仅在父容器有明确非 auto 的计算高度时生效，否则继承 auto 无效；推荐用 flex、grid 或绝对定位替代。
height 不可继承，子元素写 height: inherit 无效是常态，不是你漏写了什么 —— 它只在父容器有明确、可计算的 height 值时才真能用。
为什么 height: inherit 看似没反应
浏览器不会“猜”父容器该有多高。height 是不可继承属性，inherit 只是去读父元素当前 计算后 的 height 值。如果父容器的 computed height 是 auto（比如普通 div 没设高、或 html/body 缺少 height: 100%），那 inherit 就等于继承 auto，效果和不写一样。
- 父容器只设了
min-height: 400px？→height仍是auto，inherit无值可取 - 父容器是
display: flex且高度来自内容？→ 同样算出auto - 用了
position: absolute+top: 0; bottom: 0？→ 部分旧版 Firefox 不会把这种推导出的高度暴露给inherit
哪些场景下 height: inherit 真能生效
它只在父容器存在一个确定、非 auto 的 height 计算值时才起作用，且该值必须能被后代链正确传递：
- 父容器写了
height: 300px或height: 50vh - 父容器设了
height: 100%，且其所有祖先（html→body→ 父级容器）都显式声明了height或min-height - 父容器是
position: absolute或fixed，且同时设置了top和bottom（或inset: 0），现代浏览器可据此推导出高度
注意：max-height 和 min-height 单独存在时，不会为 inherit 提供可用值。
立即学习“前端免费学习笔记（深入）”；
别硬扛 height: inherit，换更稳的布局方案
目标是“子元素占满父容器高度”时，height: inherit 是最不可靠的路径。应优先使用原生布局机制：
- 父容器加
display: flex，子元素默认align-items: stretch（无需额外写）——但前提是父容器有明确高度（如min-height: 100vh） - 父容器加
display: grid，子元素用grid-area: 1 / 1或justify-content: stretch - 子元素用
position: absolute+top: 0; bottom: 0; left: 0; right: 0，前提是父容器position: relative - 避免在 flex 子项上写
height: 100%：它不仅常算出 0，还会直接禁用align-items: stretch
调试时最容易忽略的一点
即使你确认 html 和 body 都加了 height: 100%，只要中间某一层容器（比如 .app 或 .container）只写了 min-height: 100vh 而没写 height，height: 100% 在它后代中依然会断掉 —— 因为 min-height 不提供百分比参照源。此时 height: inherit 还是拿不到值。
