Sizing Leaflet Map inside bootstrap

I've always had issues with map height in bootstrap as the margin on the top can be different when the width of the map changes to get 100% height (but with a nav bar on the top) I end up using

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

which is ugly but gets the job done.

[2021 UPDATE]

As of 2021/01/13 Flexbox has 97% browser support and is a great option for making Leaflet responsive using the flex-grow property.

View a CodePen Demo here

It's set-up so that it will still render on browsers that don't support Flexbox just those users will have to scroll abit

¯\(ツ)/¯

============================================================

[OLD POST]

This worked for me.

Note: I wanted my map not to be 100% width on large screens so I added

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

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

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

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

.container{
    max-width:60em;
    padding: 0.2em;
}

The problem is #map is a child of body and you can only specify percentage heights for child elements if it's parent has a explicitly defined height.

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

This would create what you desire, but usable area would never grow larger then 75% of 480px. Normally a div collapses when there is not an content, but with Leaflet, even though your map is in the div it is not calculated at render, therefore collapse at render. If you want the content to take all of the vertical space, you can query window size at page load with some javascript and set the height that way.