為什麼 CSS 中的百分比高度有時會導致意外行為？

CSS：了解百分比高度的怪癖

在 CSS 中，在使用百分比值時，高度屬性可能是一個令人困惑的難題。與它的對應項寬度不同，寬度可以輕鬆地縮放到父元素的大小，百分比高度值通常會導致意外行為。

高度缺失的奧秘

考慮以下HTML 和CSS：

雖然#working 的寬度按預期計算為視口的80%，但#working 的高度#not-working 莫名其妙地變成了0。

打破依賴

這個問題的癥結在於 div 等塊元素的預設高度。預設情況下，區塊元素的高度與其內容的大小一致。這會創建一個回饋循環：

這裡，#inner 會擴展以適應其中的段落，而 #outer 會增長以適應 #inner。

百分比高度值會在此基礎上增加另一層關係。當指定百分比高度時，例如 30%，它指的是父元素的高度。然而，父元素的高度受到子元素高度的影響，導致循環依賴。

解決方案

要解決這個困境，必須打破回饋循環。這可以透過明確設定父元素的高度來實現，有效地消除其對其子元素的依賴。例如，在上面的範例中，新增 #outer { height: 500px; } 將為 #outer 和 #not-working 提供明確定義的計算。

總之，雖然由於區塊元素寬度的獨立性，百分比寬度值可以無縫工作，但百分比高度計算本質上是相關的內容並要求父元素有明確的高度定義。

以上是為什麼 CSS 中的百分比高度有時會導致意外行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！