html - 在 CSS 中，如何计算 `height:auto` 父级中的百分比高度？

Question

CSS

#parent {
  height: auto;
}

#child {
  height: 10%;
  width: 75%;
}

HTML

<div id="parent">
  <div id="child">
    <span>I'm one tenth the height of my parent.</span>
  </div>
</div>

这是禁止的还是错误的用法？这有点令人困惑，因为 child 依靠 parent 的高度来计算自己的高度，而 parent 也依靠 child 的高度来计算 height:auto..

对于上述代码，浏览器将如何计算子元素和父元素的高度？

Answer 1

This is a bit confusing because child relies on the parent's height to calculate its own height, and the parent also relies on the child's height to calculate the height:auto..

没错，所以浏览器根本不会理会百分比。来自spec :

<percentage>
[...] If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

因此两个元素的计算高度都是auto。