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 !

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 !

• javascript
• html
• css
• leaflet

3 Answers 3

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/en-US/docs/Web/CSS/length

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

Just as an alternative approach: If you have a fixed height nav bar at the top, say 50px, and fixed width on the left, say 100px, then you can make the map take up the rest of the space like this:

#map {
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 100px;
}