サイドバーと同じ高さのブートストラップカルーセル

Question

こんにちは私はブートストラップとワードプレスで私の最初のウェブサイトを作っていますが、私はこの写真で下にチェックしてください。どのようにして私のカルーセルとサイドバーを同じサイズにすることができますか？

私はすでに、サイドバーの高さのために、100％の高さや100VHは、サイドバーのクラスがメインのカタログでなかった、ありがとうございました！

<div class="col-md-12 main-head"> 

<div class="col-md-9 main-slider"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Chania"> 
     </div> 

     <div class="item"> 
      <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Chania"> 
     </div> 

     <div class="item"> 
      <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Flower"> 
     </div> 

     <div class="item"> 
      <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Flower"> 
     </div> 
     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

<div class="col-md-3 main-catalog"> 
    <h3 class="h3-catalog"> Products Catalog </h3> 

    <ul class="main-categories"> 
     <li>Home & Living </li> 
     <li> Limited Edition </li> 
     <li> Satelite Connection</li> 
     <li> Clothing </li> 
     <li> Accessories</li> 
     <li> Food </li> 
     <li> Bags </li> 
     <li> Travels </li> 

    </ul> 
</div> 

</div> 

Answer 1

フレックスボックスを使用してください。

http://codepen.io/simply-simpy/pen/PGVOwv

main-catalog { 
    background: orange; 
    display: flex; 
    flex-flow: column wrap; 
} 

.main-categories { 
    display: flex; 
    flex-flow: column wrap; 
    justify-content: space-between; 
    flex-grow: 1; 
} 

.main-head { 
    display: flex; 
}