Boostrap 3 - Как наследовать высоту от другого div

Question

У меня есть две колонки. Я бы хотел, чтобы высота меньшего столбца наследовала большую высоту столбца. Т.е.: левый столбец имеет содержимое, чтобы заполнить высоту 300 пикселей, а в правом столбце - содержимое, чтобы заполнить высоту 500 пикселей. Я бы хотел, чтобы левый столбец наследовал высоту правого столбца. Я пробовал играть с ним несколькими способами, включая настройку высоты: авто и высота: 100%, но я не получаю желаемого результата. Я использую Bootstrap 3. Можете ли вы указать мне в правильном направлении?

<div class='jumbotron'> 
    <div class='container'> 
     <div class='col-md-3 left-column'> 
     <div class='row'> 
      logo 
     </div> 
     <div class='row'> 
      <ul class='nav nav-pills nav-stacked'> 
      <li><a href='index.html'>Home</a></li> 
      </ul> 
     </div> <!-- end navigation --> 
     <div class='row'> 
     <p>Address</p> 
     <ul> 
      <li>Office: </li> 
     </ul> 
     </div> 
     </div> <!-- end left hand column --> 

     <div class='col-md-9 right-column'> 
     <div clas='row'> 
      <div class='col-md-7'> 
      <h2>About</h2> 
      </div> <!-- end about-left --> 
     </div> <!-- end row --> 
     </div> <!-- end right hand column --> 
    </div> 
    </div> <!-- end jumbotron --> 


.left-column { 
    border-left: 1px solid #888686; 
    border-right: 1px solid #888686; 
} 

.right-column { 
    margin-top: 20px; 
    padding: 20px; 
    border-left: 1px solid #888686; 
    border-right: 1px solid #888686; 
} 

Answer 1

Вы можете сделать это следующим образом:

ПРИМЕЧАНИЕ: Вы должны использовать @media запросы, чтобы избежать дополнительной высоты .left-column на маленьких экранах.

Bootply - DEMO или Full Screen View

CSS:

@media (min-width: 992px){ 
    .row { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    } 
    .left-column, .right-column { 
    float: none; 
    display: table-cell; 
    vertical-align: top; 
    } 
} 
.left-column { 
    border-left: 1px solid #888686; 
    border-right: 1px solid #888686; 
    background:red; 
} 
.right-column { 
    margin-top: 20px; 
    padding: 20px; 
    border-left: 1px solid #888686; 
    border-right: 1px solid #888686; 
    height: 500px; 
    background:red; 
} 

Answer 2

Вы можете использовать Vertical Centering Javascript