CSS中的高度百分比是一個常見的問題，有時候我們會發現設置元素的高度百分比并不生效，接下來讓我們來看看其中的原因。 首先，我們需要了解一下高度百分比的計算方式，它是基于父元素的高度計算的。例如，設置子元素高度為50%，那么它的高度將會是父元素高度的50%。但是，如果父元素沒有設置高度或者高度為auto或者默認值，則子元素的高度百分比將不起作用。 另外，還有一點需要注意的是，如果我們希望子元素的高度百分比生效，父元素也必須設置高度百分比。這是因為，當父元素高度為固定值時，子元素的高度無法隨著父元素的變化而變化，所以子元素的高度百分比也就不起作用了。 下面是一個示例代碼，我們可以看到當父元素設置固定高度時，子元素的高度百分比能夠生效，而當父元素的高度不確定時，子元素的高度百分比則無法生效。

<div class="parent" style="height: 200px">
<div class="child1" style="height: 50%"></div>
<div class="child2"></div>
</div>
<div class="parent2">
<div class="child1" style="height: 50%"></div>
<div class="child2"></div>
</div>

在第一個示例中，我們給父元素設置了一個固定高度200px，子元素的高度百分比也就能夠生效。而在第二個示例中，父元素并沒有設置高度，子元素的高度百分比因此無法生效。 總之，高度百分比不生效的原因通常是因為父元素沒有設置固定高度或者高度百分比，或者是父元素高度為auto或默認值。所以，我們應該在使用CSS時要仔細檢查父元素的高度設置，以保證子元素的高度百分比能夠正確生效。