height: 100% 和 height: inherit 在 CSS 中都用于设置元素的高度，但它们的工作方式不同：
-
height: 100%: 将元素的高度设置为其包含块的 100%。 这意味着元素的高度将与其父元素的高度相同。 关键在于父元素必须有一个明确定义的高度。 如果父元素没有设置高度，那么height: 100%将不起作用，元素高度会默认为内容高度。 这经常是初学者容易遇到的问题。 -
height: inherit: 将元素的高度设置为与其父元素的高度相同的值。 它继承父元素的height属性值，无论该值是百分比、像素、em 还是其他单位。 如果父元素没有显式设置height值，那么它会继续向上查找祖先元素，直到找到一个设置了height的元素，或者继承到默认值auto。
总结区别：
| 特性 | height: 100% |
height: inherit |
|---|---|---|
| 参考值 | 父元素的高度 | 父元素的 height 属性值 |
| 父元素无高度 | 无效，元素高度通常会塌陷为内容高度 | 继续向上查找祖先元素的 height 值 |
| 计算方式 | 相对于父元素高度的百分比计算 | 直接继承父元素的计算值 |
示例：
<div style="height: 200px; border: 1px solid red;"><div style="height: 100%; background-color: blue;">100%</div><div style="height: inherit; background-color: green;">inherit</div>
</div><div style="border: 1px solid red;"><div style="height: 100%; background-color: yellow;">100% (父元素无高度)</div><div style="height: inherit; background-color: orange;">inherit (父元素无高度)</div>
</div>
在这个例子中：
- 第一个
div(红色边框) 设置了高度 200px。内部的蓝色div使用height: 100%，因此高度也是 200px。绿色的div使用height: inherit，同样继承了 200px 的高度。 - 第二个
div(红色边框) 没有设置高度。内部的黄色div使用height: 100%，因为父元素没有高度，所以height: 100%失效，高度由内容决定。橙色的div使用height: inherit，由于父元素没有设置高度，它会继续向上查找，最终继承到默认值auto，高度也由内容决定。
选择哪个？
- 如果需要元素填充父元素的整个高度，并且父元素已经设置了明确的高度，那么
height: 100%更简洁。 - 如果需要元素的高度与其父元素的
height属性值完全相同（包括单位和计算方式），或者希望元素的高度能够根据祖先元素的高度动态调整，那么height: inherit更合适。
希望这个解释能够帮助你理解 height: 100% 和 height: inherit 的区别。
