Question

当未指定父高度（自动）时，如何让子div达到父级高度的120％？

当父级具有指定的高度时，它可以工作：

＆＃13;

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

＆＃13;

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

＆＃13;

当父高度为自动（未指定）时，它会失败：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

逻辑上这不起作用，因为height: auto元素的高度由其子元素的高度决定。如果孩子的身高依赖于父母的自动高度，那么你最终会得到循环依赖。由于这个问题，auto-height元素的子元素不能依赖于该元素 - 因此将忽略百分比单位。

你需要退后一步，采取不同的方法来解决你最终想要实现的目标。

Answer 2

使用:before代替儿童div。

＆＃13;

#bar {
  position: relative;
  display: block;
  background-color:rgba(120,0,0,0.5);
}

#bar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color:rgba(0,120,0,0.5);

}

#child {
  position:relative;
  z-index:10;
}

＆＃13;

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

＆＃13;

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

2 个答案: