html - 从内部div继承高度到外部div

Question

我有一个包含以下内容的 div。

<div class="outsideDiv">
  <div>
    <p>Some text</p>
  </div>

  <div class="imgContainer">
    <img />
  </div>
</div>

imgContainer 位于包含 p 的 div 右侧

outsideDiv 没有预定义的高度。它调整到 p 元素的高度。因此，如果 p 元素的高度为 500px，则外部 div 的高度将为 500px。我的网站是响应式的，因此 p 的高度(以及 outsideDiv 的高度)不是固定的，它会根据屏幕而变化。这部分工作完美。

我希望 imgContainer 的高度与 outsideDiv 的高度相等。 我已经尝试过使用绝对位置和相对位置并且它有效但我不想使用这种方式。我也试过继承高度但没有运气。

Answer 1

.imgContainer {
  background: rgba(0,0,0,.5);
  position: absolute;
  width:100%;
  height:100%;
  bottom: -100%;
}
.outsideDiv {
  position: relative;
}

<div class="outsideDiv">
  <div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p><p>Some text</p><p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    
  </div>

  <div class="imgContainer">
    <img />
  </div>
</div>