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

在我的ionic 3应用程序中，我想在剩下的所有屏幕上显示google地图。 但当我将“高度”设置为100%时，地图不会显示

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

html:

尝试使用以下代码：

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

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

.map {
   height: 100%;
}

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

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

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

.map {
   height: 100%;
}