从另一个面板高度设置相同的面板高度

Question

我在 col-md-6 class 中定义了两个面板，每个面板都像这样。其中一个面板将包含来自 google 个地图 API 的地图，而第二个面板在 table 中包含有关地图的信息。我希望第一个面板与第二个面板具有相同的高度，因为我使用的地图大小是固定的（例如 250 像素），否则地图的高度为 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);
});

从另一个面板高度设置相同的面板高度

Set same panel height from another panel height

html

css

panel

twitter-bootstrap