Css 谷歌地图全屏

我试图让谷歌地图显示100%的宽度和高度。我已经搜索了几个示例，但无法使其工作。这一页在这里

我在头脑中使用了这个css

<style type="text/css">
html, body { height:100%; }
</style>

html，正文{高度：100%；}

这是map div中的inline

<div id="map" style="width:100%; height:100%;">indenfor</div>

inden

这张地图没有显示出来

如果我这样做的话

<div id="map" style="width:500px; height:500px;">indenfor</div>

inden

然后地图以500x500像素显示

---

我做错了什么？

尝试在地图样式

div

上使用

minheight:100%

---

如果这不起作用，您还可以使用Javascript获取窗口的宽度和高度，然后动态设置map元素的样式以满足这些参数。

如果有一个额外的样式标记，请将其删除：

<style type="text/css" media="screen">
<style type="text/css">
html, body { height:100%; }
</style> 

html，正文{高度：100%；}

地图需要一个高度和一个宽度

<style type="text/css">
html, body { height:100%; width:100%;}
</style>

html，正文{高度：100%；宽度：100%；}

看来你用

#map { height : 100%; width : 100%; top : 0; left : 0; position : absolute; z-index : 200;}

它之所以能工作，是因为

map

没有带

position:relative

的父对象，所以它相对于窗口是相对定位的

但是，如果希望

map

相对定位到窗口，即使它有一个父窗口具有

position:relative

，也应该使用

position:fixed

而不是

position:absolute

---

此外，您不必使用如此庞大的

z-index

我使用了以下css：

#map_canvas {
    width:100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

---

在下面的示例中，将

style=“height:100%；”

应用到

主体和
html
会使google maps达到全高，因为加载到的
div
是
主体的子对象。在您的情况下，需要将
style=“height:100%”
添加到
#map
的相关父元素中

相关的：


我用：#map{高度：100%；宽度：100%；顶部：0；左侧：0；位置：绝对；z索引：200；此解决方案创建了小的水平和垂直滚动链接，问题现在被打破了。