how to make leaflet map height variable

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.