Css 百分比高度没有任何影响

我试图制作一个手风琴风格列表的动画，但不管我给孩子多少百分比，它都会完全显示出来（即使是0%）。请参阅--如果将“0%”更改为“0”（或“0px”），则隐藏效果很好，但在0%（或1%，或50%，或100%等）时，子对象完全可见。仅当您为父级

指定明确的像素高度时，百分比似乎才起作用（但这对于设置子级展开的动画效果不太好）

---

我可以理解，当未指定父级高度时，百分比高度的行为可能会很有趣，但0%应该始终是0px。这就是我不明白的地方。

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

文件说

该百分比是根据建筑物的高度计算的 生成的框的包含块。如果容器的高度 块未明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，该值 自动计算。根元素上的百分比高度是相对的 到初始包含块

---

因此，0%的高度变为

height:auto在这种情况下。
以百分比表示的高度根据父对象的高度设置高度。如果未设置父级高度，则需要指定父级的高度

文件说

该百分比是根据建筑物的高度计算的
生成的框的包含块。如果容器的高度
块未明确指定（即，它取决于内容
高度），并且该元素不是绝对定位的，该值
自动计算。根元素上的百分比高度是相对的
到初始包含块

因此，0%的高度变为
height:auto在这种情况下。
根据CSS规范：


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

请注意，如果所讨论的子元素是绝对定位的，则其他CSS规则将起作用。
根据CSS规范：


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

请注意，如果所讨论的子元素是绝对定位的，则其他CSS规则也会起作用。
这并不能回答为什么“height:0%”会使元素显示为具有高度。它不使用0%。相反，设置为height:autoThat不会回答为什么“height:0%；”会使元素显示为具有高度。它不使用0%。改为设置为高度：我明白了。当我给父母一个百分比高度时，它仍然不起作用——只有一个明确的像素高度。我猜这是因为同样的问题也适用于父母？它的父项没有明确的高度，所以它的高度计算为自动？这是正确的。在您的示例中，如果父元素
.accordion
的高度为%，则它会在
body
中查找参考高度。要查看任何效果，您需要设置
html，body{height:100%；}，然后
.accordian`将填充视口。我明白了。当我给父母一个百分比高度时，它仍然不起作用——只有一个明确的像素高度。我猜这是因为同样的问题也适用于父母？它的父项没有明确的高度，所以它的高度计算为自动？这是正确的。在您的示例中，如果父元素
.accordion
的高度为%，则它会在
body
中查找参考高度。要查看任何效果，需要设置
html，body{height:100%；}，然后
.accordian`将填充视口。