Audrey Roberts Audrey Roberts - 2 months ago 7
CSS Question

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

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!

Answer

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;
}