Html 使div保持相同高度不起作用

我试图使容器div中的两个div具有相同的高度。我用的是bootstrap的网格。正如您在下面的图像示例中所看到的。输出显示的div类

页面成员详细信息
（绿色边框div）不占父div高度的100%

注意：如果我使用class
页面成员详细信息容器（红色边框div）将div的高度设置为固定值，如250px。那么结果就如预期的那样了。
页面成员详细信息（绿色边框div）将是高度的100%。

HTML:

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


。页面成员详细信息容器{
边框：3倍实心#FF0000；
填充：0；
显示器：flex；
}
.页面成员详细信息图像{
边框：3px实心#0000ff；
左侧填充：0；
}
.页面成员详细信息图像>img{
宽度：100%；
}
.页面成员详细信息{
边框：3px实心#009b00；
}

细节
如果您担心支持较旧的浏览器，则可以设置。要显示的页面成员详细信息容器：表和要显示的子div：表单元格。这将给你同样的高度，你正在寻找。此外，它还打开了垂直对齐属性。
如果Flexbox不适合您，您应该尝试该插件。它解决了您正面临的问题，您不需要编写任何javascript。只需将属性
data mh=“group\u name”
包含在所有要匹配高度的元素上（在您的示例中是引导列
col-
），而不管内容是什么（其中“group\u name”是您指定的字符串）。我用这个插件取得了很多成功
<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>

.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%;
}