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

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，高度也由内容决定。