Fill window remaining height with row/container bootstrap

Question

I've been searching for a solution to this issue in the last 3 days with no result at all.

So, I have an HTML page that have to fit the window, and I'm using bootstrap 4.1.1. This page is pretty simple:

1 Header row, automatic or fixed height
1 Content row, have to fill the remaining window free space

The whole code is about 250 rows, so I'll try to write just an example of what I need:

<body>
<div id="header" class="container-fluid">
   <!--Bootstrap rows and stuffs that actually work well
</div>

<div class="container-fluid">
    <div class="row" id="main-row">    
        <!--FIRST COLUMN: SUMMARY-->
        <div id="menu" class="col-2 box">
            <!--Here i have a navbar menu-->
        </div>

        <!--SECOND COLUMN: CONTENT-->
        <div id="content" class="col-8 box">
           <!--Here i have contents: one video tag and one carousel-->
        </div>

        <!--THIRD COLUMN: DESCRITPION-->
        <div id="description" class="col-2 box">
           <!--Here i some text-->            
        </div>
    </div>
</div>

I just need the whole second container-fluid (or the single row in it) to fill the rest of the window keeping every column at that height.

Here's what I've tried:

Body and html height set to 100%;
Tried with one big container for both header and content instead of two
Set the second container's height to 100%/inherit/almostTriedEverything: and this is weird, it is actually set to 100% of window's height, but ignoring the header height (so I still have a vertical scrollbar)
Lot of other things like table-like layout, flex (I would like to avoid it because of IE compatibility) and almost every solution found on the web

Fun fact: bootstrap columns ignore body height at all and they go over its bottom limit.

It isn't clear what you've tried to solve this. Do you mean like [this](https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height/42195475#42195475) or [this](https://stackoverflow.com/questions/48927663/bootstrap-4-make-nested-row-fill-parent-that-has-been-made-to-fill-viewport-heig/48929133#48929133)? — Carol Skelly, Jul 13 '18 at 11:58
Tried both! No changes, or the body just get bigger to contain the container. Can't remember well in what case happens the first or the second result — Simone Serra, Jul 13 '18 at 12:29

score 1 · Accepted Answer · answered Jul 16 '18 at 11:03

In case this could help someone, I've solved this with a workaround.

Bootstrap almost doesn't care about heights and keeps them fixed (what I mean is, for example, that the header doesn't resize its height if the window height is reduced). So declaring the header height at (in my case, it fits perfectly) 165px allowed me to calculate the height of the second row with

height: calc(100vh - 165px);

Not the best solution ever but it works

score 0 · Answer 2 · answered Jul 13 '18 at 12:36

0

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing. https://getbootstrap.com/docs/4.0/components/card/

you can also create new class like this .equalhight{display:flex;} and can apply it to the top most div.

This is my first post. Thanks.

answered Jul 13 '18 at 12:36

Raj

1
1

Could you be more specific? I've done a few test but the problem remains (the "card" class stays inside the body and the rest keeps exceeding from bottom) – Simone Serra Jul 13 '18 at 13:07

Fill window remaining height with row/container bootstrap

2 Answers2