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

Share Improve this question Follow edited May 19, 2019 at 12:12 ghybs 53.5k66 gold badges8787 silver badges114114 bronze badges asked Jun 2, 2016 at 10:00 anonanon

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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