twitter-bootstrap-3heightleaflet

Set Leaflet map to height: 100% of container

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

  • Set

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

    and give its container position: relative.