Preventing fixed footer from overlapping content

Question

I've fixed my footer DIV to the bottom of the viewport as follows:

#Footer
{
    position: fixed;
    bottom: 0;
}

This works well if there isn't much content on the page. However, if the content fills the full height of the page (i.e. the vertical scroll bar is visible) the footer overlaps the content, which I don't wont.

How can I get the footer to stick to the bottom of the viewport, but never overlap the content?

Answer 1

Try using CSS Sticky Footer.

Answer 2

Maybe this will help you: CSS fixed footer.