如何使2个div具有相同的高度答案

【问题标题】：How to make 2 divs the same height如何使2个div具有相同的高度
【发布时间】：2022-01-27 23:53:05
【问题描述】：

我试图让 2 个没有共同父 div 的 div 成为较大 div 的高度。（使用display: flex）。

如上面的代码所示，我希望<child-div1> 和<child-div2> 具有相同的高度。目前，我在<parent-div> 上有display: flex，它成功地使<middle-div1> 和<middle-div2> 具有相同的高度。但是，我似乎无法弄清楚如何确保<child-div1> 和<child-div2> 具有相同的高度。

<parent-div style="display: flex">
    <middle-div1>
        <child-div1></child-div1>
    </middle-div1>
    <middle-div2>
        <child-div2></child-div2>
    </middle-div2>
</parent-div>

【问题讨论】：

如果我理解正确，height: inherit for child-div1 和 child-div2 将解决您的问题。

标签： html css flexbox

【解决方案1】：

为了弄清楚你可以在页面中右键单击，然后选择检查元素，你会看到一个像这样的窗口：

通过单击最左边的图标并将鼠标悬停在两个 div 上，您将看到确切的宽度 x 高度

【讨论】：

【解决方案2】：

将display: flex 添加到<middle-div> 弹性项目。

这将自动将align-items: stretch 应用于<child-div> 子级。（请注意，height 规则将覆盖 align-items: stretch。）

【讨论】：

【解决方案3】：

使用该布局，您可以将两个子级设置为 height: inherit; 它继承容器最高部分的高度。因此，例如，如果您在一侧有一个 400 像素高的图像，则会拉伸容器，因此，允许另一个孩子的高度也增加。

.container {
  display: flex;
}

.one, .two {
  height: inherit;
  width: 50%;
}

.one {
  background-color: lightblue;
}

.two {
  background-color: darkgreen;
  color: white;
}

<div class="container">
  <div class="one">1<br><img src="https://dummyimage.com/400x400/000/fff&text=test"></div>
  <div class="two">2</div>
</div>

【讨论】：

【解决方案4】：

一种解决方案是将height:100%; 添加到child-div1 和child-div2

<parent-div style = "display: flex">
    <middle-div1>
        <child-div1 style="height: 100%;"></child-div1>
   </middle-div1>
    <middle-div2>
        <child-div2 style="height: 100%;"></child-div2>
    </middle-div2>
</parent-div>

【讨论】：