5

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
vobet
  • 75
  • 1
  • 5
  • The documentation shows how to do [a sticky header](https://getbootstrap.com/docs/4.1/examples/navbar-fixed/) and [a sticky footer](https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/). Scrollable columns should just be an overflow setting. – Kenneth K. Dec 22 '18 at 15:36

1 Answers1

7

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

Related:
Use remaining vertical space with Bootstrap 4
Bootstrap 4.0 - responsive header with image + navbar + full-height body

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • On further testing, this works in chrome and safari, but in firefox the overflow-y: scroll property is ignored. I think it's related to this issue: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox. I've tried adding 'min-height: 0' to the second row but that has no effect. Any ideas? – vobet Dec 23 '18 at 07:38
  • I updated the [Codeply](https://www.codeply.com/go/ouc3hddx5i). For FF you'll need to use min-height:0 on the row and max-height:100% on the scrollable columns. – Carol Skelly Dec 23 '18 at 12:59