百分比高度没有任何影响

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

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

请注意，如果有问题的子元素位于绝对位置，则其他CSS规则将起作用。

Answer 2

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

文件说

  

百分比是根据高度来计算的   生成的框包含块。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的值   计算自动。根元素的百分比高度是相对的   到最初的包含块。

在这种情况下，0％的高度会变为height:auto;。