动态调整谷歌地图高度答案

【问题标题】：Adjust google maps height dynamic in row动态调整谷歌地图高度
【发布时间】：2016-02-03 14:27:42
【问题描述】：

我有这个例子(click here)，我试图让谷歌地图的高度动态调整到它旁边的跨度。

非常感谢任何帮助。

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span8">
          <p>This is something dynamic and longer than the map.</p>
          <p>I want the map to adapt to this span</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>MAP'S HEIGHT SHOULD BE LAST TILL HERE AND <b>NOT</b> SPECIFIED WITH <b>FIXED</b> HEIGHT</p>
        </div>
        <div class="span4">
          <div id="map"></div>
        </div>
      </div>
    </div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

常见的解决方案不起作用。

html, body{
  height: 100%;
}

【问题讨论】：

标签： javascript html css twitter-bootstrap google-maps

【解决方案1】：

您无法使用 CSS 做到这一点。 span8 的高度对 span4 没有影响。

您必须使用 javascript (offsetHeight) 将其计算为 span8 div 的高度并将其应用于 span4。

类似的东西：get height of a div and set the height of another div using it

【讨论】：

【解决方案2】：

经过几个小时的研究和 CSS 令人沮丧的经历，我想最好的方法是 javascript，附上一个简单的例子。

（编辑）一个朋友通过 CSS 给了我他的解决方案，附在底部

var initialHtml = document.getElementById('prCol1').innerHTML;

setInterval(function(){
    document.getElementById('prCol1').innerHTML += '<p>N/A</p>';
    var divh = document.getElementById('prCol1').offsetHeight;
    document.getElementById('map').style.height = divh + 'px';
    google.maps.event.trigger(document.getElementById('map'),'resize');
}, 1000);

setInterval(function(){
    document.getElementById('prCol1').innerHTML = initialHtml;
    var divh = document.getElementById('prCol1').offsetHeight;
    document.getElementById('map').style.height = divh + 'px';
    google.maps.event.trigger(document.getElementById('map'),'resize');
}, 5000);

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span8" id="prCol1">
          <p>This is something dynamic and longer than the map.</p>
          <p>I want the map to adapt to this span</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>MAP'S HEIGHT SHOULD BE LAST TILL HERE AND <b>NOT</b> SPECIFIED WITH <b>FIXED</b> HEIGHT</p>
        </div>
        <div class="span4">
          <div id="map"></div>
        </div>
      </div>
    </div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
      .table {
        display:table;
        height:100%;
      }
      .table-row {
        display:table-row;
      }
      .table-cell {
        display:table-cell;
        width:40%;
        height:100%;
        vertical-align: top;
      }
      #map {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="table">
        <div class="table-row">
          <div class="table-cell">
            <p>This is something dynamic and longer than the map.</p>
            <p>I want the map to adapt to this span</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>MAP'S HEIGHT SHOULD BE LAST TILL HERE AND <b>NOT</b> SPECIFIED WITH <b>FIXED</b> HEIGHT</p>
          </div>
          <div class="table-cell">
             <div id="map"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

【讨论】：