百分比高度沒有任何影響

Question

我正在嘗試製作一個手風琴風格的動畫列表，但不管我給孩子的百分比是多少，它完全顯示（即使在0％）。請參閱this JSBin - 如果您將「0％」更改爲「0」（或「0px」），則隱藏得很好，但兒童的0％（或1％，或50％或100％等）完全可見。如果您給父母<li>一個明確的像素高度（但對於展開孩子的動畫效果不佳），百分比似乎只能起作用。

我可以理解百分比高度在未指定父高度時可能表現得有趣，但0％始終應爲0px。這是我不明白的。

Answer 1

根據CSS規範：

http://www.w3.org/TR/CSS2/visudet.html#the-height-property

如果一個子元素有一個百分比的高度，其包含塊的高度沒有明確設置，那麼孩子elment的高度計算到auto，不0px。

請注意，如果問題中的子元素被定位爲絕對，其他CSS規則將發揮作用。

Answer 2

百分比高度根據父級高度設置高度。如果未設置父級高度，則需要指定父級的高度。

文檔說

百分比相對於所述 生成框的包含塊的高度來計算。如果沒有明確指定包含 塊的高度（即，它取決於內容 高度），並且該元素沒有被絕對定位，則值 計算爲自動。根元素上的百分比高度是相對於初始包含塊的相對 。

所以在這種情況下，0％身高達到height:auto;。