如何使两个并排的 div 元素保持相同的高度？

Question

我有两个并排的 div 元素。我希望它们的高度相同，并且如果其中一个调整大小也保持不变。如果其中一个因放置文本而变大，则另一个应变大以匹配高度。我无法弄清楚这一点。有任何想法吗？

 <div style="overflow: hidden">
    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
    </div>

    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!
    </div>
</div>

原文由 NibblyPig 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

弹性盒

使用 flexbox 它是一个单一的声明：

 .row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */

  padding: 1em;
  border: solid;
}

 <div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

较旧的浏览器可能需要前缀，请参阅 浏览器支持。

原文由 Pavlo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是许多人遇到的常见问题，但幸运的是，一些像 Ed Eliot 在他的博客上的 聪明人已经在网上发布了他们的解决方案。

基本上你所做的是通过添加 padding-bottom: 100% 使两个 div/列都 非常 高，然后“欺骗浏览器”认为它们不是那么高使用 margin-bottom: -100% 。 Ed Eliot 在他的博客上对其进行了更好的解释，其中还包含许多示例。

 .container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

 <div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

原文由 mqchen 发布，翻译遵循 CC BY-SA 4.0 许可协议