元素中的Google Map div不起作用

Question

我正在使用Google地图，并将其结构化为这样的元素。

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

  </main>

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

这是CSS

  #map {
    height: 100%;
  }

我试图重新编写css，以为css的结构是问题，但是我尝试的任何方法都不起作用。例如

main map {

Here Is A Link

Answer 1

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

说明：

您的#map元素设置为height: 100%，这意味着它将完全占据其父元素<main>的高度（100％）。

由于min-height上只有height个属性，而没有<main>个属性，因此#map没有要继承的height，因此花费了0 height。