make one of bootstrap rows fill the rest of the height in view and scrollable

Question

Basically, I have a bootstrap container and 2 rows in it, one being the header and the other the content. I would like to have the container to have the height of the viewport so that the content is scrollable.

<div class="container-fluid overflow-hidden h-100">
    <div class="row">
        <div class="col">
            <h1>Header</h1>
        </div>
    </div>
    <div class="row content-area">
        <div class="col">
            <div>Content blah...</div>
        </div>
    </div>
</div>

.content-area {
    max-height: 100%;
    overflow-y: auto;
}

The max-height renders the content full height of the parent which is the container so a part of the content is chopped off the view. I would like the content to fill the rest of the container's height.

I tried flex-grow-1 from bootstrap instead of the css height but no luck.

score 1 · Answer 1 · answered May 13 '20 at 01:41

1

Add vh-100 class on the first row. It will make the viewport height, 100%.

<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
    <div class="col">
        <h1>Header</h1>
    </div>
</div>
<div class="row content-area">
    <div class="col">
        <div>Content blah...</div>
    </div>
</div>

Source: https://getbootstrap.com/docs/4.4/utilities/sizing/

answered May 13 '20 at 01:41

Jun Santilla

21
2

Thank you but my question was how to make the 2nd row fill the rest of the viewport height and still scrollable? – Antediluvian May 13 '20 at 03:01

score 1 · Accepted Answer · answered May 13 '20 at 10:43

Make the container vh-100 d-flex flex-column and then add flex-grow-1 to the row.

<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
    <div class="row">
        <div class="col">
            <h1>Header</h1>
        </div>
    </div>
    <div class="row content-area bg-info flex-grow-1">
        <div class="col">
            <h1>Content blah... </h1>
            ...
        </div>
    </div>
</div>

Demo: https://codeply.com/p/7u2lXo0jyG

Related: Bootstrap 4 row fill remaining height

make one of bootstrap rows fill the rest of the height in view and scrollable

2 Answers2