Put content in 100% remaining height after navbar

Question

Sorry if this is a simple question. I want to have a nav bar of fixed height that sits at the top of the page. Then underneath it I want to have a map that takes up 100% of the remaining height and 100% of the remaining width.

The code I tried was this:

<div class="container">
  <div class="nav">
    nav
  </div>
  <div class="main" id='map'>
  </div>
</div>

CSS

 #map { 
  top: 0; left: 0; position: absolute; width: 100%; height: 100% 
 }

.nav {
  background: hotpink;
  height: 80px;
}

This doesn't give the desired result as even though the map is full page, the nav bar is below it, and also the map should only take up 100% of the reamining height after the nav bar.

score 3 · Accepted Answer · answered Feb 28 '22 at 09:44

Don't set the #map position to absolute as it's not needed for this.

All you have to do is set the height of #map to calc(100vh - 80px).

#map { 
  width: 100%;
  height: calc(100vh - 80px);
  background: red;
 }

.nav {
  background: hotpink;
  height: 80px;
}

Which will take the height of the page and subtract the height of the nav.

Put content in 100% remaining height after navbar

1 Answers1