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

I am trying to display a map on a container. I successfully display it when setting its size to a specific amount of px. However, I want the height to adapt to the container size. In order to do that, I had to set the height of every parents of the map container. Once done, the map appear "shadowed" and is not clickable, just as it was behind something. I can only zoom in and out.

HTML :

<div >
  <div >
    <div >
      <div id="mapid"></div>
    </div>
    <div  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;
}

The result:

CodePudding user response：

The culprit is most probably:

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

...which looks to enlarge the Leaflet attribution control over your map container as well.

This explains the "shadow" effect and loss of interactivity.

Avoid such general selector for such layout styling.