How to get a leaflet map canvas to have a 100% height?

Question

My leaflet canvas currently looks like the following, with a 700px height:

However I would like its height it be 100%, in order to take the whole white space.

height:100% doesn't work in the CSS properties of the map canvas. I found a few solutions but they are only good for Google Maps.

Does anybody has a solution, even if it's only a workaround ? Thanks !

Answer 1

The best way is to use the CSS length units vh and vw. These allow a block-level HTML element to have a dimension relative to the viewport size, instead of the size of its parent element (as % does).

e.g.:

#map {
  width: 100vw;
  height: 100vh;
}

For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 2

Using height: 100% does work, it only needs the parent containers to have a size too (working demo):

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