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

Question

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

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

...它看起来也扩大了 map 容器上的 Leaflet 属性控制。

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

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