jVectorMap高度：％不起作用

Question

我正在使用这个库：http://jvectormap.com/为我的网站创建一个地图。我试图通过样式属性将地图的宽度和高度设置为100％，以使地图以全屏大小显示。

当我指定以下内容时：

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

地图显示如下：

width属性似乎正常工作，但height属性没有。当我调整窗口大小时，宽度会正确缩放，而无论是向上还是向下缩放图像，高度都会不断向上扩展。

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

Answer 1

在你的CSS中尝试这个：

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

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

Answer 2

您也可以尝试使用vh代替％

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

Answer 3

为了使jVectorMap获取完整的高度和宽度，然后将外部div容器添加到地图中。还设置宽度和高度外容器。

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

接下来添加css样式。

.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;
    }
}

要了解有关jVectorMap的更多信息，请参阅此链接https://smarttutorials.net/how-to-create-make-responsive-world-map-jvectormap-using-jquery/