传单 - 地图 "shadowed"，当大小设置为百分比时不可点击

Question

我正在尝试在容器上显示地图。将其大小设置为特定数量的 px 时，我成功显示了它。但是，我希望高度适应容器大小。为此，我必须设置地图容器的每个父项的高度。一旦完成，地图就会出现“阴影”并且不可点击，就像它在某物后面一样。我只能放大和缩小。

HTML :

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div id="mapid"></div>
    </div>
    <div class="col-2" id="selection">
      //
    </div>
  </div>
</div>

CSS:

body {
    padding-top: 65px;
    margin: 0;
}
html, body, div {
    height: 100%;
    width: 100%;
}
#mapid { 
    height: 100%;
    width: 100%;
    align-self: center;
}

结果：

Answer 1

罪魁祸首很可能是：

div {
    height: 100%;
    width: 100%;
}

...这看起来也扩大了对地图容器的 Leaflet 属性控制。

这解释了“阴影”效应和交互性丧失。

避免使用此类布局样式的通用选择器。

传单 - 地图 "shadowed"，当大小设置为百分比时不可点击

Leaflet - Map "shadowed" and not clickable when size is set to a percentage

html

css

leaflet