divを同じ高さにすることはできません

Question

私は2つのdivを同じ高さのコンテナdiv内に作成しようとしています。私はブートストラップのグリッドを使用しています。あなたは下の画像例で見ることができます。出力には、クラスpage-member-detail-info（緑色の境界div）のdivが、その親divの高さの100％を占めていないことが示されています。

注：divの高さをクラスpage-member-detail-container（赤い枠線の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

フレキシボックスのための別のケース！表示を追加するだけでコンテナにフレックスします。

.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プロパティも開きます。