CODEWITHSUNDEEP
javascripthtmlcssleaflet
anon
anon

Reputation:

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

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

Map with 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 !

Upvotes: 4

Views: 7962

Answers (3)

DigitalDan
DigitalDan

Reputation: 2647

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

Upvotes: 0

IvanSanchez
IvanSanchez

Reputation: 19079

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

Upvotes: 8

Jieter
Jieter

Reputation: 4229

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

Upvotes: 3

Related Questions