Bootstrap div stretch to bottom of page

Question 1

Bootstrap div stretch to bottom of page

html css twitter-bootstrap footer

Troy Griffiths · May 28, 2015 · Viewed 22.7k times · Source

Answer

Answer

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.

Question 2

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.

Bootstrap div stretch to bottom of page

Answer

Related questions