How do I position my footer to the bottom of the page, regardless of the size of viewport or the content?

Question

My footer works perfectly on every page of my website, except the mobile version of my About page. On my About page, the content (headers, paragraphs, etc.) is larger than the height of the viewport, and for some reason, the footer sticks to the bottom of the viewport, but not the bottom of the page.

This is my website's About page. If you resize the size of the browser window to a width similar to a mobile device's, you should see what I'm talking about.

Here is my HTML structure (without the content):

<!DOCTYPE>
<html>
    <head></head>
    <body>
        <div class="wrapper">
            <header><nav></nav></header>
            <section></section>
            <footer></footer>
        </div>
    </body>
</html>

Here is the relevant CSS:

html,
body {
    height: 100%;
}

.wrapper {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
}

And one more weird thing that's happening that I can't explain...

If I go to my About page, resize the browser window's width to something more mobile, and go into the Chrome developer tools... and then I scroll down, past where the footer is (but shouldn't be) on the page, it looks like the <html>, <body>, and <div class="wrapper"> elements all end at where the footer ends on the page, even though the <section> content continues on down. It's like the content is overflowing out of the entire <html> element, and I have no idea why this would happen.

Also, I am aware of position: fixed and that it would easily fix this problem, but I would prefer not to have the footer visible in the viewport at all times. In cases where the content on the page takes up more space than the height of the viewport (necessitating vertical scrolling), I would like for the user to be able to scroll down and then come to the footer at the bottom of the page, not have it in their face at all times.

All the elements in your `.section-content` div are floated and so it is collapsing. Simply remove that property from its direct children or clear the floats. — Marcelo, Feb 17 '15 at 03:06
@JeanGkol I thought the `
` was supposed to go around the entire ``. — Michael, Feb 17 '15 at 03:09
@Marcelo D'oh! That's exactly what was wrong! Thanks, I added my clearfix (`.clear`) to the `
` and it's working perfectly now. If you write it as an answer, I can accept it and give you the points for it. — Michael, Feb 17 '15 at 03:11
possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — TylerH, Feb 17 '15 at 04:45

score 0 · Accepted Answer · answered Feb 17 '15 at 03:13

0

From inspecting your live site, all the elements in your .about .section-content div are floated. You can either remove the property from them or clear the floats.

answered Feb 17 '15 at 03:13

Marcelo

4,395
1
18
30

score 0 · Answer 2 · answered Feb 17 '15 at 03:14

I simply changed your wrapper css position to absolute and it put the footer to the bottom of the page as requested.

.wrapper {
    position: absolute;
    min-height: 100%;
}

If this screws around with the content layout in non-mobile views use media queries.

@media screen and(max-width:480px) {
   .wrapper {
      position: absolute;
      min-height: 100%;
    }
    .about h2, .about p {
         float:none;
    }
}

How do I position my footer to the bottom of the page, regardless of the size of viewport or the content?

2 Answers2