为什么百分比高度在 CSS 中不像百分比宽度那样起作用？

CSS 中的百分比高度：解开谜题

使用 CSS 时遇到的常见难题之一是宽度和百分比值之间的差异高度。虽然宽度的百分比值按预期工作，但高度却并非如此。

假设您有两个元素：#working 和 #not-working，每个元素都有指定的宽度和高度百分比值。 #working 元素的行为符合预期：其宽度为视口的 80%。然而，#not-working 元素的高度仍然为 0，尽管设置为 30%。

块元素的本质

要理解这个难题，我们需要深入研究 CSS 中块元素的本质。默认情况下，块元素（例如

）根据其内容确定其高度。这意味着它们的高度会扩展以适应所包含内容的大小。

父子关系

使用百分比值设置块元素的高度时，我们引用元素的父容器。在#not-working 元素中，父级是视口，它没有定义特定的高度。结果，父子之间存在无限的反馈循环，无法准确确定身高。

打破反馈循环

解决这个问题并允许百分比高度正常运行，我们必须通过为父元素提供特定的高度来打破反馈循环。这为计算子元素的百分比高度提供了一个固定的参考点。

总之，CSS 中的高度百分比值要求父元素具有定义的高度，以防止歧义并实现准确计算。如果没有固定父元素的高度，子元素的高度保持为 0。

以上是为什么百分比高度在 CSS 中不像百分比宽度那样起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！