vaibhav shah vaibhav shah - 4 months ago 14
CSS Question

how to make leaflet map height variable

In my Application I was making div of map as

<div id="map" style="height: 610px; width:100%"></div>


but to make my map responsive I want to make height also 100%, if I make
height: 100%
then it is not working.

How can I make height also variable like width so that map can be seen properly on any device.

Demo : http://jsfiddle.net/CcYp6/

If you change height & width of map then you will not get map.

Answer

You need to set the parent elements to height: 100%; first

html, body {
   height: 100%;
}

Demo

Demo (This won't work as no parent height is defined)

Explanation: Why do you need to do that? So when you specify an element's height in % then the 1st question that arises is: 100% of what? By default, a div has height of 0px, so 100% for a div simply won't work, but setting the parent elements height to 100%; will work.