如果使用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%将无效。

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

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