如何让 2 个 div 继承父 div 内哪个 div 的高度更高的高度？答案

【问题标题】：How to make 2 divs inherit the height of which ever div has higher height inside a parent div?如何让 2 个 div 继承父 div 内哪个 div 的高度更高的高度？
【发布时间】：2015-09-30 22:13:39
【问题描述】：

我无法匹配父 div 中 2 个 div 的高度。我很难向我解释我是在 Jsfiddle 上做到的。

http://jsfiddle.net/DSQpd/

基本上，我想做的是匹配高度，无论哪个更长。我已经尝试将height:100%; 放在两个 em 上，但仍然不起作用。

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

去掉浮动并使用

display: table-cell;

Demonstration

【讨论】：

非常感谢！我完全忘记了！
table-cell 可能会以其他方式影响 div 样式，因此该解决方案应与其他 CSS 规则隔离，以便在您以后遇到神秘问题时轻松禁用。

【解决方案2】：

我知道这可能不是最优雅或最流行的答案，但一种非常简单的方法是使用<table> 方法，其中两个单元格位于一行中。易于维护，跨浏览器工作等。

【讨论】：

【解决方案3】：

桌子很丑。我还会考虑为您的每个项目使用 flexbox 的魔力。唯一的问题是您是否使用 Bootstrap 或其他框架提取动态数据。然后在每个 x 元素中使用 'clearfix' 类会更有意义，否则您将为自己编写更多代码。然后再一次，你总是可以只使用 JavaScript 来确定最高元素并在你的 div 中复制它。

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

#parent { display: flex; align-items: stretch; }
#child { display: flex;}

【讨论】：

【解决方案4】：

添加margin-bottom:-1000px和padding-bottom:1000px，容器div应该有overflow:hidden

.post {
            width:685px;
            margin:0 0 15px 0;
            float:left;
            background:#EEE;
        overflow:hidden;
        }

            .tags {
                width:250px;
                height:100%;
                padding:0 5px 0 5px;
                float:left;
                background:#273a47;
                color:#FFF;
                padding-bottom: 1000px;
                margin-bottom:-1000px;
            }

            .content {
                width:415px;
                float:right;
                padding:0 5px 0 5px;
                background:#069;
                color:#FFF;

          padding-bottom: 1000px;
                margin-bottom:-1000px;
            }

【讨论】：

【解决方案5】：

使用 CSS3 实现这一点的正确方法是使用 flexible boxes。对于您的示例，添加以下内容可达到预期结果：

.post {
   display: flex;
}

这是您的fiddle，上面有更新。

【讨论】：

你在 IE 上试过了吗？
没有。我也没有在 5 年前的诺基亚手机或 CLI 浏览器上进行测试。这个答案旨在提供一种非黑客方法，它不是作为不兼容浏览器的保证解决方案提供的。引用的文章在可用时提供了供应商前缀的等效项。
已经给出了非 hacky 的答案......并且不要试图说服某人 display:table-cell 是“hacky”或“神秘”。或者说 IE9 和 IE19 不是主流浏览器。弹性盒子将来会很有趣，但它们现在不可用。
这个简单的答案在哪里？如果我看到它，我不会提供我的。您是否也恐吓过该人以删除一个好的答案？ IE9 支持不应该驱动设计，特别是因为 IE10 在 IE11 中具有前缀支持和完全支持。我还不知道 IE19。
我恐吓任何人，我什至没有要求您删除您的答案，我只是准确地说明为什么在今天，如果某些用户预计会有 IE，那么这样做不是正确的方法。跨度>