Sizing Leaflet Map inside bootstrap

Question

I have been trying to change the height of my leaflet map to a percentage inside of bootstrap but everytime I do the map will not draw. Thus, I always have to revert to px value. I'm pretty sure its a simple setting that I'm missing since I am a CSS novice. Here is my css.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
    }
</style>

Answer 1

Try adding a height property to body or parent container.

Answer 2

CCS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    min-width: 100%;
}

html

<div class="container fill">
     <div id="map">

     </div> 
 </div>

Answer 3

With CSS from project Bootleaf on Github:

html,body, #map{
    height:100%;
    width: 100%;
overflow: hidden;
}
body {
    padding-top: 50px;