Question

我试图让谷歌地图显示100％的宽度和高度。我搜索了几个例子，但无法让它工作。它在这里的页面

我在头脑中使用了这个css

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

这就是地图div inline

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

地图dosnt show

如果我这样做

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

然后地图以500x500像素显示。

我做错了什么？

Answer 1

我使用了以下css：

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

Answer 2

地图需要高度和宽度。

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

Answer 3

尝试在地图样式min-height: 100%上使用div。

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

Answer 4

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

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

Answer 5

似乎你用

解决了这个问题

#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。

Answer 6

在下面的示例中，将style="height: 100%;"应用于body和html会使Google地图成为全高，因为地图加载的div是body的子项1}}。在您的情况下，您需要将style="height: 100%;"添加到#map的相关父元素。