Установите ту же самую высоту панели с другой высоты панели

Question

Я определил две панели каждый в классе col-md-6, как это. Одна из панелей будет содержать карту из API карт google, а вторая панель содержит информацию о карте в таблице. Я хочу, чтобы первая панель, чтобы иметь ту же высоту второй панели, так как размер карты я использую фиксированный (например, 250px), в противном случае карта имеет высоту 0. Мои панели выглядят следующим образом:

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Panel 1</h3> 
      </div> 
      <div class="panel-body"> 
        <div id="map" style="width: 100%;height: 250px"></div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Panel 2</h3> 
      </div> 
      <div class="panel-body"> 
        A table 
      </div> 
     </div> 
    </div> 
    </div> 

Answer 1

Вы можно использовать JQuery для этого:

HTML:

<div class="row"> 
    <div class="col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Panel 1</h3> 
     </div> 
     <div class="panel-body"> 
     <div id="map"></div> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-6"> 
    <div class="panel panel-default panel-info"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Panel 2</h3> 
     </div> 
     <div class="panel-body"> 
     A table with content 
     </div> 
    </div> 
    </div> 
</div> 

JS:

$(document).ready(function() { 
    var panelHeight = $('.panel-info .panel-body').height(); 
    $('#map').css('height', panelHeight); 
}); 

$(window).resize(function() { 
    var panelHeight = $('.panel-info .panel-body').height(); 
    $('#map').css('height', panelHeight); 
});