css的height:100%和height:inherit之间有什么区别呢？

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 之间的区别。