Bootstrap div stretch to bottom of page

Question

I have the default bootstrap template setup, and my problem is that there is white space between a div and the footer. The white space is caused by not having enough content to fill up the entire page, so the body shows in between the footer and the content div. Is there a way to stretch a bootstrap div to the bottom of the page while also making the footer to stay at the very bottom? Possibly with flex box?

Here is the code I'm working with: (trying to stretch the "wrapper" div to the footer)

HTML

<body ng-app="firstApp">
    <div ng-view="" class="everything">

        <div class="wrapper">
            <div class="mid">
                <div class="row">
                    <div class="col-sm-12">
                        <p>This is in a div that should fill the screen</p>
                    </div>
                </div>
            </div>
           <div class="push"></div>
        </div>

       <footer class="footer">
           <div class="container">
               <p>Hello I'm the footer</p>
           </div>
       </footer>
</div> <!--closes the "everything" class -->

CSS

    html {
        height: 100%;
    }

 body {
    height: 100% !important;
    font-family: 'Roboto', sans-serif;
    color: black;
    background: green;
 }

.footer {
    text-align: center;
    padding: 30px 0;
    height: 4em;
    background-color: #7ccbc8;
    width: 100%;
}

I've read many stackoverflow posts on this topic, butI'm still pretty confused about the best practice for this.

Hi, Troy to have the civ cover to the bottom of the page you need to have both `html` and `body` set to `height: 100vh;` And then set the div to the same. Just yesterday we were talking about the same issue [here](http://stackoverflow.com/questions/30469177/make-bootstrap-column-touch-the-bottom-of-the-div/30480004#30480004). Have a look and see if this help you. — AngularJR, May 28 '15 at 00:37

score 18 · Accepted Answer · edited May 23 '17 at 11:54

18

Troy, here it is so you can do that.

Set both the html and the body to height:100vh; and also set your div to the same height:100vh;

You can see this in this post that had the same issue.

edited May 23 '17 at 11:54

Community

1
1

answered May 28 '15 at 01:05

AngularJR

2,752
2
16
19

score 6 · Answer 2 · answered Aug 01 '17 at 11:46

6

What worked for me was setting both, height: 100%; and min-height: 100vh; in the fill element.

.fill {
    min-height: 100vh;
    height: 100%;
}

And adding this element to the classes of the parent container.

answered Aug 01 '17 at 11:46

Thomas Weinmüllner

83
2
5

1

Kinda works well, but `height: 100%;` stops it from extending past the height of the screen, even if the page is longer. – Peter Oct 18 '17 at 23:23

Bootstrap div stretch to bottom of page

2 Answers2