Set Leaflet map to height: 100% of container

Question

Please how can we set the map div to be height: 100% of its container?

I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}

Answer 1

Set

#map{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

and give its container position: relative.

Answer 2

The above answer didn't work for me, but this did:

   body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }

..from A full screen leaflet.js map