3

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 !

ghybs
  • 38,610
  • 6
  • 60
  • 83

2 Answers2

6

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

IvanSanchez
  • 17,083
  • 3
  • 26
  • 40
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%;
}
Jieter
  • 3,871
  • 1
  • 18
  • 30
  • 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