将Google Maps Container DIV的宽度和高度设置为100%
BBK*_*ing 58 css google-maps css-position google-maps-api-3 google-maps-api-2
我加载了Google Maps API v3并打印了Google Map div.但是当设置宽度和高度为100%并且自动我无法看到地图.
这是HTML代码段.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法解决这个问题？
Mac*_*iel 66
如果要用它覆盖整个页面,则必须将所有父容器设置为100%宽度.您必须至少为#content div设置宽度和高度的绝对值.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
- 如果我只希望地图出现在网站的一部分而不是100%,该怎么办？@Machiel (5认同)
- 要清楚,内容div中的每个父元素(在OP的代码中它是#map-canvas,而不是#content)**必须**具有特定的宽度/高度设置,无论是相对还是精确.这样做,这个答案是正确的. (3认同)
Mad*_*ota 41
将地图容器设置为相对的位置.这是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>
在所有浏览器上测试过.这是截图.
Yar*_*120 39
很少有人意识到css定位的力量.要将地图设置为占据其父容器的100%高度,请执行以下操作:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
如果在#map_canvas_container中有任何非绝对定位元素,则它们将设置它的高度,并且地图将采用确切的可用空间.