Set dimensions of OpenLayers map container

Question

I have basic HTML layout with Bootstrap navbar and an OpenLayers map.

JS Fiddle here.

HTML looks like this:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Title</a>
    </div>
  </div>
</nav>

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

The problem is navbar because it pushes the map div down and i have to scroll down a bit to see the whole map. Can I somehow restrict the map to fit only the visible screen extents so i don't get any scrolling space (like in the picture below)?

Here is a good example of what i'm trying to acomplish: http://jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html

Answer 1

Just add:

#map {
  height: calc(100vh - 52px); /* 100% of the viewport height - navbar height */
}