我加载了Google Maps API v3并在div中显示了Google地图。但是当将宽度和高度设置为100％和auto时，无法看到地图。
以下是HTML代码片段。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法解决这个问题？
设置Google地图容器DIV的宽度和高度为100%。
66
- BBKing
2
12个回答
70
如果您想覆盖整个页面，必须将所有父容器的宽度设置为100％。至少，您需要为＃content div设置绝对值的宽度和高度。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
- Machiel
3
6如果我只想让地图出现在网站的某个部分而不是整个页面上怎么办？@Machiel - CodeGuru
@RainbowHat 只需在您的 CSS 中指定大小，将 div#content 的宽度和高度更改即可。 - Machiel
5需要明确的是，从内容 div（在 OP 的代码中为 #map-canvas，而不是 #content）开始的每个父元素都必须设置具体的宽度/高度，无论是相对还是精确。只要这样做，这个答案就是正确的。 - user1228
47
设置地图容器的定位为相对定位即可解决问题。以下是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>
已在所有浏览器上进行测试。这里是屏幕截图。
- Madan Sapkota
39
很少有人意识到CSS定位的威力。要将地图设置为占用其父容器100％的高度，请执行以下操作：
如果在#map_canvas_container内有任何非绝对定位的元素，它们将设置其高度，而地图将占用确切的可用空间。
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
- CyberRobot
3
非常有趣的技巧。我已经做了一段时间的Web开发，但之前并不知道这个技巧。 - Lyn Headley
很遗憾，给这个问题投反对票的人从未解释“为什么”... 对我来说运行得很好。 - Chris
很棒的技巧。以前从未使用过，但效果非常好。 - Gardner
3
如果您无法影响父元素（例如在嵌套组件的情况下），您可以使用height: 100vh，这将使其具有完整的窗口（=视图）高度；
- YoniXw
1
如果您正在使用网格布局，该怎么办？ - Michael
2
这对我很有效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
- Mostafa
1
哇，这个问题居然真的解决了。太不可思议了，谢谢！ - Jonathan
1
你可以将高度设置为 -webkit-fill-available。
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
- Naresh Chennuri
0
Gmap会将内联样式的位置设置为相对于div。使用以下代码覆盖它：
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
希望能够帮到你。
- abhilashv
-2
迟做总比不做好！我把我的变成了一个类：
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
然后
<div id="map" class="map"></div>
- developer68
-3
如果那个
div是你页面上唯一的元素，就设置:body, html {
height: 100%;
width: 100%;
}
- Juan G. Hurtado
1
http://stackoverflow.com/questions/13926371/google-map-inside-container#comment19198810_13926371 - CodeGuru
-3
我为找到答案而苦苦挣扎。
你实际上不需要对正文大小做任何处理。你只需要从地图代码中删除内联样式：
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
移除所有内联样式，添加类或ID，然后按照您喜欢的方式进行样式设置。
- Andy
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
#content{background-color:#fff;border:solid 1px #a6a196;border-radius:4px;-moz-border-radius:4px;height:auto; overflow:hidden;}- BBKing