2 divの等高設定

Question

私はブートストラップを使用していますので、2つのdivを作成したいと思います。

1 - コンテンツのdiv（情報-節） 2 - divのbackgroung画像（カバーブロック）

としかし、私は問題を抱えています。私は設定height1 = height2を傾ける。私のコード：

<div class="cover-section"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-6 info-section"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      </div> 
      <div class="col-md-6 cover-block"></div> 
     </div> 
    </div> 
</div> 

のCss：

.info-section { 
background-color: red; 
padding: 100px 40px; 
border: none; 
} 

.cover-block { 
background: url(../images/2.jpg) center no-repeat; 
background-size: cover; 
height: 500px; 
} 

は私が

.cover-block{ 
    height:100%; 
} 

を使用しようとするが、それは

Answer 1

それはフレキシボックスを使用しています。この 試してみてください動作しません。

チェックスニペット

.row-eq-height { 
 
    display: flex; 
 
} 
 
.info-section { 
 
background-color: red; 
 
} 
 
.cover-block { 
 
background-color: yellow; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 

 
<div class="cover-section"> 
 
    <div class="container-fluid"> 
 
     <div class="row row-eq-height"> 
 
      <div class="col-xs-6 col-md-6 info-section" > 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
      </div> 
 
      <div class="col-xs-6 col-md-6 cover-block"></div> 
 
     </div> 
 
    </div> 
 
</div>