Question

我已经在col-md-6类中定义了两个面板，就像这样。其中一个面板将包含来自Google Maps API的地图，而第二个面板则包含有关表格中地图的信息。我希望第一个面板具有与第二个面板相同的高度，因为我使用的地图尺寸是固定的（例如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);
});

从另一个面板高度

1 个答案: