How to keep an absolute positioned item at the bottom of the site even if there is vertical scrolling?

Question

I have a footer that has position absolute:

#footer {
    position:absolute;
    bottom:0;
    height: 43px;
    padding:0;
    background-color: #333333;
    width:100%;
    color:#737373;
    text-align:center;
}

I've noticed that if I do vertical scrolling the footer stays exactly in the same place (it doesn't scroll along).

Any suggestions to fix this?

Answer 1

In this fiddle, if you squish the window down so the footer should overlay the text, you'll see it stays fixed to the bottom of the page. It uses position: fixed;