How to grow a Bootstrap element to fit remaining height without navbar?

Question

I'm trying to get the #output element to fill the dead space of the page, but all answers I found online suggest using min-height: 100vh in some way, but that doesn't take into account the navbar (copied from Bootstrap's website).

The final version should have the <nav> , the .container fit on the rest of the screen, and the #output within it taking the rest of the container space not taken by the <img> and <div> -- all in all, no overflow.

JSFiddle: https://jsfiddle.net/Lfyh2bz9/1/

(Note: I know I should've delegated the style stuff into a separate CSS file, but I'm just trying to get it to work first:) )

How would you do this? Would you make the <nav> a .container and use flexbox ? Would you convert the .container to rem units, like the <nav> ? Or maybe calculate the remaining height using CSS?

Thanks in advance, --J.

Edit: even forcing the container items to be 25%-50%-25% (OR forcing the output to be 3 linebreaks high,) would work, assuming it's a percentage of the container itself!

Answer 1

Is it what you wanted to achieve? - codepen (no changes in HTML, just a few new lines of CSS)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar Title</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 2</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid d-flex flex-grow-1 flex-column" style="background: gray;">
  <div id="output" class="row d-flex flex-grow-1 justify-content-center text-center">
    <div>Stretch/Grow This Part To Fit Height Without Navbar And Rest of Content</div>
  </div>

  <div class="row d-flex justify-content-center">
    <img src="https://via.placeholder.com/381x298/O">
  </div>
  <div class="row d-flex justify-content-center">
    <button type="button" class="btn btn-dark col-4" onclick="">Option 1</button>
    <button type="button" class="btn btn-light col-4" onclick="">Option 2</button>
  </div>

</div>

<style>
body {
  /*  expand body to fill page heigth  */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>