CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Halnex
Halnex

Reputation: 4526

How to achieve full height columns in Bootstrap 4

I am using Bootstrap 4 Beta trying to make 2 columns full height no matter what the screen size is.

The below code works greats, both columns are full height no matter what device I view this one.

But when I add the bootstrap navbar inside the container, above the the row, I start seeing extra height to the page and I end up with a scrollbar.

If I am not mistaken, bootstrap is not taking into account the navbar height into the calculations.

I am not sure how to fix this.

DEMO https://jsfiddle.net/a2z4paes/1/

Try removing the nav block and you'll see the columns become full height with no scrollbar.

This is my HTML

<div class="container h-100">
    <div class="row justify-content-center h-100">
        <div class="col-md-8" style="background: lightgreen; height: 100%">
            <h1>test</h1>
        </div>

        <div class="col-md-4" style="background: lightblue;">
            <h1>test</h1>
        </div>
    </div>
</div>

Upvotes: 1

Views: 719

Answers (1)

Sandeep C. Nath
Sandeep C. Nath

Reputation: 927

Flexbox is the best solution for that, even though you could fix it with calc() function but it will be more like a hack. Here's the updated fiddle, the steps I've done is given below https://jsfiddle.net/sandeepcnath/a2z4paes/4/

remove the class h-100,

add this style to the container 

container {
height: 100%;
display: flex;
flex-direction: column;
}

Then to the div which is the sibling to nav, (the div which has classes row &justify-content-center) add the style flex: 1;

then you can see that the height is 100% and scroll bar won't appear even if you open or close the nav.

Upvotes: 2

Related Questions