How To Get A Leaflet Map Canvas To Have A 100% Height?

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

Solution 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

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