how to make leaflet map height variable

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.

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.

Use height="100vh" works in newer browser. but its ok.

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;
}

<div class="map-wrapper">
  <div id="map"></div>
</div>

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.