javascript - Google map 和 100% 高度有问题吗？

Question

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

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

这些是我到目前为止的样式(不包括 javascript)

Address & Phone

<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)，不会有明确的高度值。

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

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

UPDATED FIDDLE .