如果使用 css "calc" 则地图不显示

Question

我有一个 here.com，我在其中完全按照描述使用地理编码示例 (LINK)。

我的 <div class="mapModal" id="mapContainer"></div> 有以下 css:

.mapModal{
height:calc(100% - 50px);
width:calc(100% - 250px);
top:50px;
left:250px;
padding:5px;
position:absolute;
z-index:3;

}

遗憾的是，这没有显示 div 和地图。

当我像这样将高度更改为固定高度时：height: 800px; 效果很好。

有什么方法可以使地图容器的（适合屏幕的）动态大小？

Answer 1

父元素需要定义高度，否则 height: 100% 将无效。

如果您希望元素为 window 高度/宽度的 100%，您可以使用视口单位：

.mapModal{
   height:calc(100vh - 50px);
   width: calc(100vw - 250px);
   ...
}

Map not showing if using css "calc"