Google地图全高不适合窗口大小

Question

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

这里有一些图片

当窗口足够大时： https://github.com/720kb/angular-datepicker

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

部分代码。我使用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 positioning techniques。