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

Question

我已将谷歌地图的高度设置为 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;
}

我希望它能正确调整大小，这样就不会重叠。

如有任何帮助，我们将不胜感激。

Answer 1

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

Answer 2

我也遇到了同样的问题，@Kay_N 的回答对我有用。

TLDR

将

position: absolute;

添加到地图的 div 元素，使其采用适当的视口高度。