html - 自动高度父 div 中的百分比高度？

Question

当未指定父级高度(自动)时，如何让子级 div 成为父级高度的 120%？

当父级具有指定的高度时，它起作用:

#bar {
  background-color:rgba(120,0,0,0.5);
  height:120px;
}

#child {
  background-color:rgba(0,120,0,0.5);
  height:120%;
}

<div id="bar">
  <div id="child">
    Lorem<br/>
    ipsum<br/>
    dolor<br/>
    sit<br/>
    amet.
  </div>
</div>

当父高度为自动(未指定)时失败:

#bar {
  background-color:rgba(120,0,0,0.5);
}

#child {
  background-color:rgba(0,120,0,0.5);
  height:120%;
}

<div id="bar">
  <div id="child">
    Lorem<br/>
    ipsum<br/>
    dolor<br/>
    sit<br/>
    amet.
  </div>
</div>

Answer 1

逻辑上这是行不通的，因为您的 height: auto 元素的高度由其子元素的高度决定。如果 child 的高度依赖于 parent 的自动高度，你最终会陷入循环依赖。由于这个问题，自动高度元素的子元素的高度不能依赖于该元素 - 因此百分比单位将被忽略。

您需要退后一步，想出一种不同的方法来实现您最终想要实现的目标。