javascript - 当我尝试动态设置高度时 map 不加载

Question

当我在我的页面上加载 map 时，使用以下代码可以正常加载:

<div id="googleMap" style="width: calc(100% - 2px); height: 800px;"></div>

但是，当我尝试以这种方式加载它时，它不会加载，我不明白为什么。

<div id="googleMap" style="width: calc(100% - 2px); height: calc(100% - 2px);"></div>

谁能解释为什么这没有加载？它们是否是任何推荐的替代品，以便我可以获得 map 的高度以动态适合我的 div？它不一定需要有两个像素的空间。谢谢!

Answer 1

当您设置基于百分比的高度时，还需要定义父级的高度。如果父项的高度为 0，则 calc(100% - 2px) 的高度等于 0。鉴于这适用于基于固定 px 的高度，您只需设置父级的高度即可使其工作。

假设直系 parent 的高度是用基于百分比的值定义的，请使用以下内容:

html, body { height:100%; }

这是一个 example证明这一点。

或者，如果该元素被另一个元素包裹，则使用基于固定 px 的高度。 (example)