使 Divs 具有相同的高度不起作用答案

【问题标题】：Making Divs the same height not working使 Divs 具有相同的高度不起作用
【发布时间】：2017-01-10 20:14:54
【问题描述】：

我正在尝试使容器 div 内的两个 div 具有相同的高度。我正在使用引导程序的网格。正如您在下面的图像示例中看到的那样。输出显示类为 page-member-detail-info 的 div（绿色边框 div）未占据其父 div 高度的 100%。

注意：如果我使用类 page-member-detail-container（红色边框 div）将 div 的高度设为固定值，例如 250px。然后结果如预期。 page-member-detail-info（绿色边框 div）将是高度的 100%。

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-12 page-member-detail-container">
            <div class="col-sm-3 page-member-detail-image">
                <img src="http://example.com/image.jpg" alt="My Image">
            </div>
            <div class="col-sm-9 page-member-detail-info">
                DETAILS
            </div>
        </div>
    </div>
</div>

CSS：

.page-member-detail-container {
    border: 3px solid #FF0000; // red
    padding: 0;
}

.page-member-detail-image {
    border: 3px solid #0000ff; // blue
    padding-left: 0;
}

.page-member-detail-image>img {
    width: 100%;
}

.page-member-detail-info {
    border: 3px solid #009b00; // green
    height: 100%;
}

【问题讨论】：

如果 Flexbox 不适合你，你应该试试插件 matchHeights。它解决了您面临的确切问题，您无需编写任何 javascript。无论内容如何（其中“group_name”是您分配的字符串），只需在您想要匹配高度的所有元素上包含属性data-mh="group_name"（在您的情况下为引导程序col-）。我用这个插件取得了很大的成功

标签： html css twitter-bootstrap

【解决方案1】：

Flexbox 的又一个案例！只需将 display:flex 添加到您的容器中即可。

.page-member-detail-container {
    border: 3px solid #FF0000;
    padding: 0;  
    display: flex;
}

.page-member-detail-image {
    border: 3px solid #0000ff;
    padding-left: 0;
}

.page-member-detail-image>img {
    width: 100%;
}

.page-member-detail-info {
    border: 3px solid #009b00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-12 page-member-detail-container">
            <div class="col-sm-3 page-member-detail-image">
                <img src="http://example.com/image.jpg" alt="My Image">
            </div>
            <div class="col-sm-9 page-member-detail-info">
                DETAILS
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

如果支持较旧的浏览器是一个问题，那么您可以设置 .要显示的页面成员详细信息容器：表和要显示的子 DIV：表单元格。这将为您提供您正在寻找的相同高度。此外，它还打开了 vertical-align 属性。

【讨论】：