全高的谷歌地图不适应窗口大小答案

【问题标题】：Google Map at full height not adapting to window size全高的谷歌地图不适应窗口大小
【发布时间】：2015-09-15 12:26:46
【问题描述】：

我已将谷歌地图的高度设置为 85%。如果窗口足够大，它将具有适当的大小。但如果窗口很小，它会以某种方式重叠。

这里有一些图片

当窗口足够大时：

当窗口较小时（底部没有灰色边框）：

一些代码。我使用 Bootstrap 3

HTML：

<div class="row full-height">
    <div class="col-md-12 full-height">
      <div class="map-container">
         {{> googleMap name="map" options=mapOptions}}
     </div>
    </div>
  </div>

CSS：

html, body, section, .mainpanel, .contentpanel { height: 100%; }

.full-height {
  height: 100%;
}

.map-container {
  width: 100%;
  height: 85%;
  position: relative;
}

我希望它能正确调整大小，以免重叠。

任何帮助将不胜感激。

【问题讨论】：

您可能需要查看 google maps api，特别是 google.maps.event.trigger(map, "resize");
问题是，即使我在窗口很小的时候刷新页面，它的大小也不正确
试试position: absolute;。 W3 学派语录 > 元素相对于其第一个定位（非静态）的祖先元素进行定位。所以它仍然是相对于父窗口，但在调整大小时会确保它的 85%。

标签： html css twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

要达到您想要的效果，您必须使用 JavaScript 来调整地图 div 的大小/调整大小或使用CSS positioning techniques。

【讨论】：