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 !

score 7 · Answer 1 · answered Jun 02 '16 at 10:40

7

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

answered Jun 02 '16 at 10:40

IvanSanchez

18,272
3
30
45

Thank you, I didn't know those units, I'm going to give it a try. – Jun 02 '16 at 10:51

score 3 · Accepted Answer · answered Jun 02 '16 at 10:26

3

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

answered Jun 02 '16 at 10:26

Jieter

4,101
1
19
31

Thank you, I managed to make it work by adding height:100% pretty much everywhere. For some reason the map now takes "more" than 100%, thus adding scrollbars to the browser. – Jun 02 '16 at 10:52
@ojathelonius Hard to say what's wrong without some code. Do you have non-zero paddings on `body`? – Jieter Jun 02 '16 at 10:54
I don't actually. http://i.imgur.com/QLrtDKi.jpg Currently looks like this, I can move the map around by scrolling and the map goes "under" the fixed top bar or the navbar... – Jun 02 '16 at 10:59
@ojathelonius looks like you size the map canvas at 100% of the browser window, but still add a navigation and sidebar. That's off course going to shift the map by the with of the sidebar and the height of the navigation. How do you size those items? – Jieter Jun 02 '16 at 11:02
I'm trying to figure out how it all works ; the map canvas is indeed set at 100%, however it's all contained in a wrapper which is positionned relatively to the top bar and the sidebar, and this wrapper doesn't initially overlap those elements - until you use the scrollbars. This wrapper is also set at 100% – Jun 02 '16 at 11:13
You can also use absolute positioning for the map canvas, like done in [this website](http://sailplanner.nl/). – Jieter Jun 02 '16 at 11:20

score 0 · Answer 3 · answered Jul 18 '22 at 17:41

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

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

3 Answers3

Linked

Related