我在调整高度以使 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;
}
最佳答案
实际上,您的 CSS 选择器中存在语法错误:}.mapWrapper { ... }
删除 .mapWrapper
类之前的第一个右花括号,并且它会起作用。
因此 CSS 引擎忽略 .mapWrapper { ... }
规则和 .mapWrapper
元素 (.map- canvas
),不会有明确的高度
值。
因此,根据规范 MDN ,对于 height
属性:
The
percentage
is calculated with respect to theheight
of the generated box's containing block. If theheight
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.
关于javascript - Google map 和 100% 高度有问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21651078/