谷歌地图高度为 div 父级的 100%答案

【问题标题】：google maps height 100% of div parent谷歌地图高度为 div 父级的 100%
【发布时间】：2015-12-31 22:24:56
【问题描述】：

是否可以将谷歌地图高度设为父 div 的 100%？我注意到高度为 100% 时，地图不可见，但如果我将 div 的高度与地图（以像素为单位）相加，则地图可以正确显示。是否有一些技巧可以实现 100% 的父 div 的映射？这不起作用

<div class="block halfrect">
    <div id="map" style="height:100%;"></div>
</div>

这行得通

    <div class="block halfrect">
        <div id="map" style="height:590px;"></div>
    </div>

有什么想法吗？

【问题讨论】：

你是如何连接地图的？使用 iframe 或 javascaript？
javascript, 谷歌 api v3
发布您找到的解决方案，并接受它作为答案，以便其他人可以使用您的解决方案
我在 div 映射中添加了这些规则：“display: block; position:absolute; height:auto;”现在可以工作了
您的问题似乎与此类似。您的 block halfrect 类没有与之关联的高度，因此地图填充了 100% 的空白。 stackoverflow.com/questions/32927894/…

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

【解决方案1】：

reference: Mike Williams' Google Maps Javascript API v2 tutorial page: Using a percentage height for the map div

如果您尝试在地图 div 上使用 style="width:100%;height:100%"，您会得到一个高度为零的地图 div。这是因为 div 试图成为<body> 大小的百分比，但默认情况下<body> 具有不确定的高度。有一些方法可以确定屏幕的高度，并使用该像素数作为地图 div 的高度，但一个简单的替代方法是更改它，使其高度为页面的 100%。我们可以通过对<body> 和<html> 应用 style="height:100%" 来做到这一点。（我们必须对两者都这样做，否则<body> 会尝试成为文档高度的 100%，并且默认值是不确定的高度。）

代码 sn-p：

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
  <div id="map" style="height:100%;"></div>
</div>

【讨论】：