如何在剩余屏幕上显示谷歌地图？

Question

在我的 ionic 3 应用程序中，我想在剩余的所有屏幕上显示谷歌地图。 但是当我将高度设置为 100% 时，地图没有显示出来。

html 和 scss 文件如下所示，通过将高度设置为 55%，谷歌地图显示，但在剩余屏幕上留下空白。

html:

  <ion-item>
    <ion-avatar item-start>
      <img [src]="item.profilepic"/>
    </ion-avatar>
    <p>Last Seen: {{lasttime}} </p>
    <p>Distance: {{distance}} km </p>
  </ion-item>

  <ion-buttons>
    <button ion-button block (click)="navme()"> NAVIGATE TO {{item.name}} </button>
  </ion-buttons>

  <div #map id="map" class="google-map"></div>

scss

.google-map{
  height: 55%;
  width: 100%;
  font-size: 15px;
}

Answer 1

尝试使用此代码：

.whatever is containg the map {
   position: relative;
}

.map-container {
  position: absolute;
 height: 100%;
}

.map {
   height: 100%;
}