Bootstrap: How to make a simple full height layout?

Question

I'm trying to make this layout in bootstrap

--------------------------------------------
|                                          |
|                                          |
--------------------------------------------
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
--------------------------------------------

An important part is that the top section take up the larger of 96px and 20% of the screen and the bottom part should take up the rest of the screen.

While the grid system has given me great power in manipulating the column widths, I'm having trouble finding how to do the same with the row heights.

Here is my current structure:

<div class="container-fluid" style="height: 100vh">
    <div class="row">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            Bottom Left
        </div>
        <div class="col-md-10">
            Bottom Right
        </div>
    </div>
</div>

And it looks like this:

--------------------------------------------
|                                          |
|                                          |
--------------------------------------------
|      |                                   |
|      |                                   |
--------------------------------------------

Which looks okay on a phone, but completely squished on a desktop.

I've gotten some hacky success by setting the second row div to height = 80% but I'm sure there's a better way.

Answer 1

Percentage heights aren't the best option. Instead, make the container a flexbox column (d-flex flex-column) and then use grow (flex-grow-1) on the row that you want to fill the remaining height...

https://codeply.com/go/jCIuhHCvHW

<div class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-md-2 border">
            Bottom Left
        </div>
        <div class="col-md-10 border">
            Bottom Right
        </div>
    </div>
</div>

Also see: How to make the row stretch remaining height