css - 谷歌地图全屏

Question

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

我在头脑中使用了这个 css

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

这在地图 div 内联

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

地图不显示

如果我这样做

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

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

我究竟做错了什么？

score 10 · Accepted Answer

我使用了以下CSS：

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

score 4 · Accepted Answer

地图需要高度和宽度。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

有一个额外的样式标签，删除它：

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

score 0 · Accepted Answer

看来你解决了

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

score 0 · Accepted Answer

在下面的示例中，应用和style="height: 100%;"使谷歌地图全高，因为加载到的地图是. 在您的情况下，您需要添加到.bodyhtmldivbodystyle="height: 100%;"#map

有关的：

6 回答 6