使Divs達到相同的高度不起作用

Question

我正在嘗試使容器div中的兩個div具有相同的高度。 我正在使用bootstrap的網格。 如您在下面的圖像示例中看到的。 輸出顯示div的class page-member-detail-info （綠色邊框div）未占據其父div高度的100％。

注意：如果我使用class 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%;
}

Answer 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> 

Answer 2

如果需要支持較舊的瀏覽器，則可以設置。 page-member-detail-container要顯示：表，子DIV要顯示：table-cell。 這將為您提供相等的高度。 同樣，它也打開了vertical-align屬性。