how to make leaflet map height variable

Question

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 1

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.

Answer 2

You have to set the div size with JavaScript.

$("#map").height($(window).height()).width($(window).width()); map.invalidateSize(); 

You can find a complete example here.