Javascript jVectorMap高度：%s不工作

我正在使用此库：为我的网站创建地图。我试图通过style属性将地图的宽度和高度设置为100%，使地图以全屏大小显示

当我指定以下内容时：

<div id="map1" style="width: 100%; height: 100%"></div>

地图显示如下：

“宽度”属性似乎可以正常工作，但“高度”属性不能正常工作。当我调整窗口大小时，宽度会正确缩放，而不管我是向上还是向下缩放图像，高度都会不断向上缩放

如何使用百分比使地图以指定比例显示？

在CSS中尝试以下操作：

head {
    height:100%;
}
#map1 {
    position:absolute;
    height:100%;
}

---

将head元素的高度设置为100%将设置地图高度的定义。

您也可以尝试使用vh而不是%

<div id="map1" style="width: 100%; height: 100vh"></div>

---

以便jvectoramap获取完整的高度和宽度，然后将外部div容器添加到地图中。同时设置容器外部的宽度和高度

<div class="map-container">
     <div id="world-map" class="jvmap-smart"></div>
</div>

---

要了解更多关于jVectorMap的信息，请参考此链接

你是上帝！非常感谢你。我在这个问题上花了几个小时。我会尽快把它设置为正确答案。

.map-container{
    height: 300px;
}

.jvmap-smart{
    width: 100%; 
    height: 100%;  
}
@media only screen and (min-width: 576px) {
    .map-container{
        height: 350px;
    }
}
@media only screen and (min-width: 768px) {
    .map-container{
        height: 400px;
    }
}
@media only screen and (min-width: 992px) {
    .map-container{
        height: 500px;
    }
}
@media only screen and (min-width: 1200px) {
    .map-container{
        height: 600px;
    }
}