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 的區別。