百分比高度没有任何影响

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;。