height: 100% 和 height: inherit 在 CSS 中都用于设置元素的高度，但它们的工作方式不同，导致产生的效果也不一样。 关键区别在于它们如何参考父元素来确定高度。
-
height: 100%: 将元素的高度设置为其包含块高度的 100%。 这意味着元素的高度将与其包含块的高度完全相同。 需要注意的是，如果包含块的高度未明确设置，则height: 100%将不起作用。 换句话说，父元素需要有一个定义的高度（例如，通过像素、em 或 vh 设置），才能使子元素的height: 100%生效。 -
height: inherit: 将元素的高度设置为与其父元素的计算高度相同。 这意味着元素将继承其父元素的 height 属性值，无论该值是百分比、像素值还是其他单位。 如果父元素没有显式设置height属性，它将继续向上查找祖先元素，直到找到一个具有显式height值的元素，或者默认使用auto。
总结区别：
| 特性 | height: 100% |
height: inherit |
|---|---|---|
| 参考对象 | 包含块 | 父元素 |
| 计算方式 | 包含块高度的 100% | 继承父元素的 height 值 |
| 父元素无高度 | 无效 | 继续向上查找祖先元素的 height 值 |
示例：
<div style="height: 200px; background-color: lightblue;">
<div style="height: 100%; background-color: lightcoral;">100%</div>
</div>
<div style="background-color: lightgreen;">
<div style="height: 200px; background-color: lightblue;">
<div style="height: inherit; background-color: lightcoral;">inherit</div>
</div>
</div>
在这个例子中：
- 第一个红色
div的高度是 200px，因为它继承了其包含块（外部蓝色div）的 200px 高度。 - 第二个红色
div的高度也是 200px，因为它继承了其父元素（内部蓝色div）的 200px 高度。
选择哪个？
- 如果希望元素填充其包含块的整个高度，则使用
height: 100%。 确保包含块具有显式设置的高度。 - 如果希望元素具有与其父元素完全相同的高度（包括单位和计算值），则使用
height: inherit。
希望这个解释能够帮助你理解 height: 100% 和 height: inherit 之间的区别。