How to fit a leaflet map under a bootsrap nav header? - css

Question

I'm using bootstrap in combination with a leaflet map. Now to give the map full height of the window I used $("#map").height($(window).height()); But I have a nav header at the top of the page. This is the html of the bootstrap nav bar:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#"><img id="logo" src="images/logo.png"></a>
</nav>
This is my map div:
<div class="col-md-9 col-sm-8 col-xs-8" id="map"></div>
Now when I load the page I get a scrollbar at the side because the map takes the full window height + the height of the nav bar. Is there a way to solve this? Can I add something to the css of the nav bar so the map will be behind it?
UPDATE:
After I implemented you'r suggestion #IvanSanchez, the map got real thin like this:
UPDATE
When I add the css with pixels like this it works and the thin map changes into a 600px height:
#map {
display : table-cell;
height : 800px;
/*height: calc ( 100vh - 5em );*/
}
But I want it to be responsive so I need it in % or like #IvanSanchez suggested it.

Answer 1

Now to give the map full height of the window I used $("#map").height($(window).height());
Don't.
If you want to fit stuff to the viewport size, use the vh, vw, vmin and vmax CSS units.
If you cannot use absolutely positioned block elements to control the size of the map container, then use calc like #map { height: calc ( 100vh - 5em ); }