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

Issue

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 !

Solution

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 By - Jieter