谷歌地图和 100% 高度有问题吗？答案

【问题标题】：Issues with Google Map and 100% height?谷歌地图和 100% 高度有问题吗？
【发布时间】：2014-02-08 19:57:07
【问题描述】：

我在调整高度以使地图实际出现时遇到问题 - 我知道我必须将 html 和 body 高度设置为 100%（我这样做了）并将父 div 设置为 100%（因此 .info div 具有 100% 的高度），但由于某种原因，它仍然无法正确渲染地图 - 宽度可以正常工作，但高度不能。

我添加了一个jsfiddle 来说明我的意思。

这些是我目前拥有的样式（不包括 javascript）

地址和电话

<div class="mapWrapper">
    <div id="map-canvas"></div>
</div> </div>

html, body {
    width: 100%;
    height: 100%;
}
}
.mapWrapper {
    width: 100%;
    height: 100%;
    margin-bottom: 5%;
    margin-left: 3%;
    padding: 0;
}
#map-canvas {
    width: 65%;
    height: 65%;
    min-height: 65%;
    padding: 0;
    margin: 0;
    border: 3px solid #355868;
}
.info {
    width: 100%;
    height: 100%;
    float: left;
    padding-left: 30px;
}

【问题讨论】：

您的地图似乎没有加载。尝试将画布的宽度和高度指定为绝对长度而不是 %。 stackoverflow.com/questions/15700550/…
奇怪的是，它在我的本地主机服务器上加载得非常好，并且使用 em 值而不是百分比让它工作正常。我想这会解决这个问题：D
很好 (y) 来吧，回答你的问题。

标签： javascript html css

【解决方案1】：

实际上，您的 CSS 选择器中有语法错误：}.mapWrapper { ... } 删除 .mapWrapper 类之前的第一个右大括号，它会起作用。

所以 CSS 引擎会忽略 .mapWrapper { ... } 规则和 .mapWrapper 元素（它是 .map-canvas 的父元素），不会有明确的 height 值。

因此，根据规范 MDN，对于 height 属性：

percentage 是相对于height 计算的生成框的包含块。如果包含的height 块未明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为自动。根元素上的百分比高度是相对的到初始包含块。

UPDATED FIDDLE.

【讨论】：

【解决方案2】：

对于其他想知道的人 - 实际上使用 em 的百分比确实可以正确调整高度。不完全确定这是否需要您设置父元素的高度，但我所做的只是将 100% 更改为 em 值，并且它起作用了。

【讨论】：