css twitter-bootstrap flexbox bootstrap-4

Bootstrap - How to create a full screen layout with scrollable columns?

I'm trying to create a full screen layout that takes up 100% of the viewport with a sticky header and footer, and individually scrollable columns in the main content area.

I've experimented with using .h-100 and .flex-grow-1 on various rows and columns but I can't quite get it to work. The closest I've come is to add h-100 to the container and the middle row, but that pushes the footer off the bottom of the screen.

<body>
<div class="container-fluid h-100">
    <div class="row">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">Article list </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row">
        <div class="col-12 border">Footer </div>
    </div>
</div>
</body>

I can get it to work with just a single column, but adding more than 1 column breaks the layout in a way I don't understand.

Solution

Make the container d-flex and then use flex-grow-1 to make the content area fill the height. You'll also want to use flex-shrink-0 on the Navbar and Footer so they don't "squish" in height.

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

Demo: https://www.codeply.com/go/ouc3hddx5i