如何将Google地图容器DIV的宽度和高度设置为100%?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (303)

我加载了Google Maps API v3并打印了Google地图。但是,当div宽度和高度设置为100%和自动我看不到地图。

这里是HTML代码片段。

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

有没有办法解决这个问题?

提问于
用户回答回答于

如果要用它覆盖整个页面,则必须将所有父容器设置为100%宽度。必须至少为#content div设置宽度和高度的绝对值。

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}
用户回答回答于

设置地图容器定位到相对。这里是HTML

<body>
    <!-- Map container -->
    <div id="map_canvas"></div>
</body>

和简单的CSS

<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>

在所有浏览器上测试过。这是截图

扫码关注云+社区

领取腾讯云代金券