Question

我有一个例子(click here)，其中我试图让谷歌地图的高度可以调整到它旁边的范围。

非常感谢任何帮助。

＆＃13;

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

＆＃13;

常见的解决方案无效。

html, body{
  height: 100%;
}

Answer 1

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

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

类似于此的内容：get height of a div and set the height of another div using it

Answer 2

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

（编辑）一位朋友通过CSS向我提供了他的解决方案，附在底部

user_last3[name].append(score)

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>

在行中调整谷歌地图高度动态

2 个答案: