Set Leaflet map to height: 100% of container

7
votes

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%;
}
2
twitter-bootstrap-3heightleaflet
Is #map a direct descendant of body? – jme11
Make sure that all of the ancestors of #map have a height of 100% and it should work. – jme11
@jme11 im using AdminLTE as my bootstrap template... it would be quite difficult to make these changes all the way up without affecting the overall working of the template – Charles Okwuagwu

2 Answers

22
votes

Set

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

and give its container position: relative.

5
votes

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