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>

Answer 2

您可以使用flexbox实现此目的。

body{
  margin:0;
}
.outsideDiv{
  background:red;
  display:flex;
}
.outsideDiv > div{
  float:left;
  width:50%;
}
.outsideDiv p{
  height:500px; 
}
.imgContainer{
  background:blue;
  float:right;
  width:50%;
  height:100%:
}

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

以下是演示：https://jsfiddle.net/r73kh3bo/

Answer 3

如果您因浏览器支持而不想使用 Flexbox ，请参阅另一个示例：https://jsfiddle.net/r73kh3bo/1/

基本上你可以用display: table-cell创建一个父div，而UI Thread内的每个孩子都有相同的高度。

从div内部到div div

3 个答案: