how to make leaflet map height variable

Question

In my Application I was making div of map as

but to make my map responsi

Answer 1

Put a position: relative wrapper parent around it, then position your map absolutely to fill that parent:

.map-wrapper {
  position: relative;
}

#map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


  

If #map already has a parent that you can position relatively, just use that; you won't need the .map-wrapper element.

Leaflet Quick Start Guide could be clearer on this point as it's a common use case. The mobile tutorial hints at it.