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

Korykorzybski

Is #map a direct descendant of body? – Glennisglennon

Make sure that all of the ancestors of #map have a height of 100% and it should work. – Glennisglennon

@Glennisglennon 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 – Korykorzybski

It seems that we both have the same issue. Can't seem to figure out how to stretch the leaflet map to cover the entire bootstrap container template_img. I tried the answers below and few other answers on the Internet, but none has work so far. Here are my html html_img and my CSS css_img. Are there other workarounds to fix my issue? especially without using javascript since I'm a newbie and don't know about Javascript. I'm Rendering the map using folium inside a Django app btw. – Conclude

Answer 1

Set

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

and give its container position: relative.

Bicephalous

You're going to need to give more context for the html structure of AdminLTE. It's not at all clear what's not working here. In short: one of the parent elements of your #map element will need a fixed height/width. You can only set #map { height: 100%; } if one of it's parents has fixed height. – Bicephalous

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

Vilma

Answer 3

Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.

If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).

If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).

Jerrybuilt

Actually a good and explanatory answer, thanks – Rapp