react，百度地图API，chrome浏览器里的container大小取百分比或固定值的问题？

Question

已写的地图组件部分代码如下：

import React from 'react'
import './index.css'
export default class Map extends React.Component {
    // 初始化地图实例
    componentDidMount() {
    // 注意：在react脚手架中全局对象需要使用 window 来访问，否则，会造成ESLint校验错误
      const map = new window.BMapGL.Map("container")
    // 设置中心点坐标
      const point = new window.BMapGL.Point(116.404, 39.915)
    // 初始化地图
      map.centerAndZoom(point, 15)
      // 添加地图类型控件
      // map.addControl(new window.BMapGL.MapTypeControl({
      //   mapTypes:[
      //     window.BMAPGL_NORMAL_MAP,
      //     window.BMAPGL_HYBRID_MAP
      //   ]})
      // )
    }
    render() {
        return <div className='Map'>
            {/* 地图容器元素 */}
            <div id='container'/>
        </div>
    }
}

其中的map和container样式代码如下：

.Map, #container {
    height: 100%;
}

如果height的取值为100%，则空白一片，试过加入 z-index: 1 或 !important 等代码，结果依然空白一片，显示不出地图来：

如果height的取值为固定值，如改为500px，则能显示出地图来：

然而，虽然能显示出地图来，但如果遇到不同尺寸的屏幕时，会出现半屏、超屏、满屏等不同的情况，请问如何才能实现地图在所有尺寸的屏幕上都满屏显示？

Answer 1

写 100 vh 试试 或者 其它相对单位