css - 百分比高度没有任何影响

Question

我正在尝试制作手风琴式列表的动画，但无论我给孩子多少百分比，它都会完全显示（即使是 0%）。看到这个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

如果子元素具有百分比高度，并且未明确设置其包含块的高度，则子元素的高度计算为auto，而不是0px。

请注意，如果所讨论的子元素是绝对定位的，其他 CSS 规则就会发挥作用。

Answer 2

百分比高度根据父项的高度设置高度。如果没有设置父级高度，则需要指定父级的高度。

文件说

该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 auto。根元素上的百分比高度是相对于初始包含块的。

height:auto;所以在这种情况下，高度为 0% 。