谷歌地图 div 在一个元素中不起作用

Question

我正在使用谷歌地图，并把它放在这样的元素旁边。

<main id="panel" class="panel">
<div class="topBar"></div>  
<div id="map"></div>
</main>

现在，如果我删除元素 main，地图就会完美显示，但是一旦我添加元素，它就会消失。

这是 CSS

#map {
height: 100%;
}

我试图重写 css，认为 css 的结构是问题所在，但无论我尝试什么都不起作用。

main map {}

这是一个链接

Answer 1

在main.panel元素上设置height: 100%;。

解释：

您的#map元素设置为height: 100%这意味着它将完全占用 (100%) 其父元素的高度，<main>在本例中如此。

由于<main>上只有min-height财产，没有height财产，#map没有继承height，因此需要0height。