Establezca la misma altura del panel desde otra altura del panel: html, css, twitter-bootstrap, panel

He definido dos paneles cada uno dentro de unCol-md-6 clase como esta. Uno de los paneles contendrá un mapa de la API de Google Maps, mientras que el segundo panel tiene información sobre el mapa en una tabla. Quiero que el primer panel tenga la misma altura que el segundo panel, porque el tamaño del mapa que estoy usando es fijo (por ejemplo, 250 px), de lo contrario, el mapa tiene la altura 0. Mis paneles tienen este aspecto:

  <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>

Respuestas

Puedes usar jQuery para esto:

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);
});