Question

我有一个问题是要调整高度以便地图实际出现 - 我知道我必须将html和身高设置为100％（我做了）和父div为100％（因此.info div具有100％的高度）但由于某种原因它仍然没有正确地渲染地图 - 宽度工作正常，但高度没有。

我已经加入jsfiddle来证明我的意思。

这些是我目前使用的样式（不包括javascript）

地址＆amp;电话

<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;
}

Answer 1

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

因此CSS引擎忽略了.mapWrapper { ... }规则和.mapWrapper元素（它是.map-canvas的父级），没有明确的{{ 1}}值。

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

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

<强> UPDATED FIDDLE

Answer 2

对于其他任何想知道的人 - 使用em超过百分比确实可以让高度适当调整。不完全确定是否需要您设置父元素的高度，但我所做的只是将100％更改为em值，并且它有效。

Google Map和100％身高的问题？

2 个答案: