I can't get the footer to stay on the bottom of the page.

Question

I can't seem to get the footer on my page to stay at the bottom and have it continually pushed down when ever I want to add more content. Now I know that this question has been asked about a million times, and I have read through many tutorials and watched several videos on the subject.

However, I just can't seem to make it work. I don't know what I'm doing wrong. The footer appears to only stay in one place. I know that to someone here, you're going to find an obvious mistake that is easily fixed. However, I'm not a professional web designer by any means. In fact, this is not my job at all. But I always like to learn how to do things, and my site looks amazing (At least to me). I just can't, for the life of me, figure out what's wrong with this one problem.

Should I start by pasting the entire coding for my page?

Answer 1

Check out this fiddle, hopefully I didn't misunderstand your question. The JS in there can be ignored, only the CSS and HTML are relevant.

I've seen a lot of people asking this question, and I had it too at one point, so I figured I'd post a comprehensive answer here :) Anyway, explanation:

The HTML:

<div class="wrapper">
    <button id="add-content">Add more content</button>
    <ul class="content">
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
    </ul>
    <footer>
        Footer!
    </footer>
</div>

And the CSS:

body,
html {
    padding: 0;
    margin: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 100px;
}

footer {
    height: 100px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    bottom: 0;
}

So, the content & footer have a wrapper around them, because that's how most people roll, but it's not required and you can actually do this using just the body as the wrapper.

Now, key points to note:

• html, body has a height: 100%: The height of a block element is, by default, determined by it's content. So, even if you try to position the footer at the bottom, using position: absolute; bottom: 0, it's actually getting pushed to the bottom of the first non-static parent element, or if there are no non-static parent elements, the bottom of the html/body element. By setting height: 100%, we can force the body, html elements to take up the entire available viewport and ignore content height. (You can also use min-height: 100%;, but it depends on which browsers you want to support)

• .wrapper has a min-height: 100%: Between the sticky element and the element you want to sticky the footer to, you want to make sure all elements have 100% height, otherwise they'll collapse to match the height of the content.

• .wrapper has box-sizing: border-box; padding-bottom: 100px;: The padding at the bottom is to make sure that if content gets added to the wrapper, it doesn't end up getting lost behind the sticky footer. This padding should match the footer height, or be greater.

• footer has position: absolute; bottom: 0;: No explanation needed here, I'm guessing. The next point is actually more important.

• .wrapper has position: relative: Remember what I said about non-static parents? By making .wrapper non-static, we make sure that footer stays inside .wrapper, while remaining sticky.

I think that covers it, but I'd recommend playing around with the relevant HTML/CSS in the fiddle to get a clear understanding of what's going on and how the elements interact.

P.S.: While going through your fiddle, I noticed there's a .wrapper class, but no element? I'd recommend adding that to the fiddle(and removing footer content), it'll be easier to track down what's missing :)

P.P.S.: Check out this fiddle branched from yours, I've made the following modifications after removing all unnecessary HTML content:

• Added .wrapper element around all the body content, except the footer.
• Added .push element at the bottom of the .wrapper element
• Removed a bunch of unnecessary CSS styles from the footer, changed positioning to relative.

Answer 2

Haa the famous sticky footer problem. I think we all once passed by their. If you do as it says there > http://ryanfait.com/sticky-footer/ You'll manage to do one proper.

The other solution is to have a position:fixed; bottom:0px; see this fiddle but this will mean your footer will be always display over content. It will be position relatively to your window and not to your page.

Answer 3

I would start with:

    .myStyle{
      position:absolute;
      bottom:0;
   }

If you want the footer to always be visible on the page (even when you scroll) you need to use: position:fixed;