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

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

Answer 2

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

Route::post('aggiorna', function() {
$quantita = Input::all();
$carrelli = \App\Models\Carrello::where('entry_by', \Session::get('uid'))->get();
     $quantita = explode(',', $quantita);
     $i = 0;
     foreach($carrelli as $carrello) {
        $carrello->quantita = $quantita[$i]; 
        $i = $i++;
     }
    return Redirect::to('carrello'); 

});

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/