height不可继承，需显式用inherit才能继承父元素计算后的高度值；若父元素高度为auto或未生效，inherit即无效，此时应改用flex、grid或绝对定位等布局方案。
子元素无法继承父元素的 height，不是因为你写错了 height: inherit，而是因为 height 本身不可继承 —— 这是 CSS 规范决定的，跟写法无关。
为什么 height: inherit 看似没用
你写了 height: inherit，但子元素高度还是 0 或没变化，常见原因有三个：
- 父元素自身
height没生效（比如只设了min-height或max-height，而没设明确的height） - 父元素高度由内容撑开（即未设置固定/计算出的高度），此时浏览器无法提供一个确定值供子元素继承
- 父元素用了
display: flex或display: grid，但子元素没参与主轴拉伸逻辑（比如没设align-self: stretch），inherit只能取到父元素“计算后的 height 值”，而这个值可能仍是auto
height 属于不可继承属性，必须显式处理
CSS 中只有部分属性默认可继承（如 color、font-size），而 height、width、margin、padding 都属于“不可继承属性”。这意味着：
-
height: inherit不是“让子元素变高”，而是“让子元素去读父元素当前计算出的height值” - 如果父元素的
height计算结果是auto（最常见情况），那inherit就等于继承auto，效果和不写一样 - 想让子元素占满父容器，更可靠的方式不是依赖继承，而是用布局机制：比如
display: flex+align-items: stretch，或position: absolute+top/bottom: 0
哪些场景下 height: inherit 真的能用
它只在父元素有明确、可计算的 height 值时才有效，例如：
- 父元素设了
height: 200px（固定值） - 父元素设了
height: 50vh或height: calc(100% - 20px)，且其祖先链中存在可参照的高度上下文（比如html, body { height: 100% }） - 父元素是
position: absolute且设置了top/bottom，从而形成明确高度区间
注意：min-height 或 max-height 单独存在时，不会为 inherit 提供可用值 —— 浏览器不会把 min-height 当作“继承源”，这是很多人的误判点。
替代方案比死磕 inherit 更实际
当目标是“子元素撑满父容器高度”，直接放弃 height: inherit 是更省事的选择：
- 给父元素加
display: flex，子元素自动拉伸（除非设了align-self: flex-start） - 用
display: grid，配合grid-template-rows: 1fr - 父元素
position: relative，子元素position: absolute; top: 0; bottom: 0 - 避免用百分比高度（如
height: 100%），除非你能保证整条祖先链都有明确高度定义
真正容易被忽略的是：哪怕你写对了 height: inherit，只要父元素高度没“落地”（即最终计算值不是具体像素或视口单位），它就只是个空转指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
