How to make footer go to bottom when there isn't enough content on page

Question

Using Bootstrap 3.3.7

I want the footer to always be aligned at the very bottom of the browser window.

I do not want to use the "sticky footer" because I don't want it to overlay any of my content.

When the page has enough content it looks ok, but when it doesn't it just appears randomly across the screen.

Example of markup:

<body>
    <div class="container">
      <div class="row">
      <h1>My page</h1>
      <p>Page content here</p>
      </div>
    </div>

    <footer>
        <div class="container">
            <div class="row"><p>Footer content here</p></div>
        </div>
    </footer>
</body>

If there's plenty of content in the body of the page it's ok. But for short pages it's not.

I'm using the default nav bar at it's default height

<nav class="navbar navbar-static-top navbar-inverse">

</nav>

I've looked for solutions on this but none seem to work. Can't understand why Bootstrap have made this so complex to do such a simple task. Not everyone wants a sticky footer!

check this out http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer — Moneer Kamal, Sep 30 '16 at 15:13
@MoneerKamal that's for the sticky footer, which is what I don't want to use. — John, Sep 30 '16 at 15:17
@AudreyRoberts what's wrong with sticky footer? [bootstraps example](http://getbootstrap.com/examples/sticky-footer/) — Vucko, Sep 30 '16 at 15:25
I think you do want the "sticky footer" example, but the name "sticky footer" is mis-leading. It doesn't overlay the content and pushes down when the content is longer than the viewport: http://www.bootply.com/4Tt79fRBDF — Carol Skelly, Sep 30 '16 at 17:52

David Stenstrøm · Accepted Answer · 2016-09-30T15:49:03.420

4

If you don't care about IE < 10 you can use flex. It's really simple, but as mentioned it's only for "modern" browsers.

HTML:

<body>
    <main>
        <!-- main content goes here -->
    </main>
    <footer>

    </footer>
</body>

CSS:

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

edited Sep 30 '16 at 15:49

answered Sep 30 '16 at 15:13

David Stenstrøm

762
1
8
22

@ErikPhilips I'm accepting it as the answer because it works, and solves my problem. If you have a solution which works in all browsers and care to explain the logic of how it works, I'll change the accepted answer. If not, this just works and is fine for my needs. – John Sep 30 '16 at 15:24
My comment wasn't about if it worked or not, it was about the fact that SO frowns on *link-only-answers* because if the link dies, then so does this answer. He has updated the answer with the example, which means future users don't have to work about a link dying or not. – Erik Philips Sep 30 '16 at 18:31

Tarek Adra · Answer 2 · 2016-09-30T16:43:46.093

You can do it if you make body height as 100% and removed the footer height

html, body {
        height: 100%;
    }

.content {
        height: calc(100vh - 150px);
        height: -o-calc(100vh - 150px); /* opera */
        height: -webkit-calc(100vh - 150px); /* google, safari */
        height: -moz-calc(100vh - 150px); /* firefox */
    }

.content {
    background-color:red;
    width: 100%;
    min-height: 500px;

}

.footer{
  background-color:green;
  height:150px;
}

check out my code on jsfiddle

try to change

>   min-height: 500px;

to

> min-height: 200px;

IN

> ".content"

to see the difference

How to make footer go to bottom when there isn't enough content on page

2 Answers2