Bootstrap 4 Scrollable Div take up remaining middle screen height

Question

I am trying to design a page with Bootstrap 4 with 6 divs, and I need DIV #4 to take up the remaining height and be scrollable.

Divs 1-3 will be slightly dynamic and not a fixed height. Div 5 and 6 would be the same. Div 4 should take up the remainder of the screen, but the content might be longer, so it needs to scroll.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0px;
        }
    </style>
</head>
<body>
<div class="d-flex flex-column h-100">
    <div style="background-color: #000000; width:100%; margin: 0 auto; color: white;">
        VARIABLE CONTENT
    </div>

    <div style="background-color: blue; width:100%; margin: 0 auto;">
        <table width="100%">
            <tr>
                <td style="color: white;">Firstname LastName</td>
                <form name="RankingForm" id="RankingForm">
                    <td>
                        <select name="Ranking" id="Ranking">
                            <option>
                        </select>
                    </td>
                </form>
            </tr>
        </table>
    </div>

    <div style="background-color: cyan; width:100%; margin: 0 auto;" class="flex-grow-0">
        CONTENT
    </div>

    <div class="flex-grow-1" style="width:100%; overflow:scroll; margin: 0 auto;">
        <div style="width:100%;">
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
        </div>
    </div>

    <div class="w-100" style="background-color: #d0d0d0; margin: 0 auto;">
        CONTENT
    </div>
</body>
</html>

Generated UI, where bottom div is not at the bottom

Any help would be appreciated.

You should have a look at flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Sercan özen, Nov 26 '19 at 19:02
I think this has already been answered [here](https://stackoverflow.com/questions/50293459/bootstrap-4-scrollable-row-which-fills-remaining-height/50293892#50293892), [here](https://stackoverflow.com/questions/42194886/how-to-make-the-row-stretch-remaining-height/42195475?r=SearchResults&s=2|111.0785#42195475) and [here](https://stackoverflow.com/questions/50262517/bootstrap-4-row-fill-remaining-height/50262611?r=SearchResults&s=1|117.6953#50262611) .. remember `height:100%` does nothining unless it's container (body,html) have a defined height — Carol Skelly, Nov 26 '19 at 19:58
Thanks. Are you suggesting that this cannot be done without Flexbox? — CFCeltic, Nov 26 '19 at 19:59
Thanks Zim, but I had looked at those examples, and neither of them are trying to accomplish the same thing I am trying to accomplish. They want to fill the remaining height, after a certain DIV. I want the middle div to fill the remaining height when sandwiched between other divs. Also, I do have the HTML and BODY set to 100%, i just did not include that in the write up, but i had added it now. — CFCeltic, Nov 26 '19 at 20:04

Yunhai · Accepted Answer · 2019-11-27T16:54:46.390

as comment suggests, flexbox is what you want to make your sandwich style. However, I believe it's introduced after 4.1. So this solution only work if your bootstrap version >= 4.1.

There were some mistakes you made in your code. You are using inline-style as class such that class="flex-grow: 0", you either put them into style="flex-grow: 0" or class="flex-grow-0".

To keep a fix height of last <div> or whatever <div> you want, you either give it a height: somenumberhere px or height: somenumberhere vh.

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>

<body>
<div class="d-flex flex-column h-100">

    <div style="background-color: #000000; width:100%; margin: 0 auto; color: white;">
        VARIABLE CONTENT
    </div>

    <div style="background-color: blue; width:100%; margin: 0 auto;">
        <table width="100%">
            <tr>
                <td style="color: white;">Firstname LastName</td>
                <form name="RankingForm" id="RankingForm">
                    <td>
                        <select name="Ranking" id="Ranking">
                            <option>
                        </select>
                    </td>
                </form>
            </tr>
        </table>
    </div>

    <div style="background-color: cyan; width:100%; margin: 0 auto;" class="flex-grow: 0">
        CONTENT
    </div>

    <div class="flex-grow-1" style="width:100%; overflow:scroll; margin: 0 auto;">
        <div style="width:100%;">
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
        </div>
    </div>

    <div class="w-100" style="background-color: #d0d0d0; margin: 0 auto;">
        CONTENT
    </div>
</body>

Thanks for the feedback. I have been doing HTML and software development for a long time now, and I am open to feedback when I make a mistake, as we all do. I am relatively new to Bootstrap and the classes included, and I am referencing 4.3.1 as well. As for fixed height of DIVs, it will be determined by the image size placed in the DIV, so I did not want to specificy an absolute height. I will give your suggestion a try. — CFCeltic, Nov 27 '19 at 16:36
Thanks, but this suggestion did not work. The page is loading without being full height. I have updated the code in my question. — CFCeltic, Nov 27 '19 at 16:45
@CFCeltic no problem. I will edit my answer if you felt offended. Have you try out the code snippet in other places or you just changed some styles in your own code. I had changed some of redundant style in your own code and put height to `row`. — Yunhai, Nov 27 '19 at 16:47
I have tried this code out in multiple other places. Even a simple HTML page. I am trying to get this working with dynamic content, but coming up with a middle DIV that does not expand without longer content in the DIV. — CFCeltic, Nov 27 '19 at 16:51
Yunhai, thanks for the response, and it was not the code itself. But rather, the Bootstrap version. You mentioned it, and I looked at the JS line, but the CSS line was mismatched. That was the solution. Thanks — CFCeltic, Nov 27 '19 at 16:58

Bootstrap 4 Scrollable Div take up remaining middle screen height

1 Answers1