CODEWITHSUNDEEP
bootstrap-4containersheight
Simone Serra
Simone Serra

Reputation: 301

Fill window remaining height with row/container bootstrap

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:

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:

  1. Body and html height set to 100%;
  2. Tried with one big container for both header and content instead of two
  3. 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)
  4. 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.

Upvotes: 2

Views: 1671

Answers (2)

Simone Serra
Simone Serra

Reputation: 301

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

Upvotes: 1

Raj
Raj

Reputation: 1

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.

Upvotes: 0

Related Questions