CSS Footer, stay at bottom of page not bottom of screen

Question

I cant seem to find how to place a div (footer) at the bottom of the PAGE not the SCREEN. Many answers I saw say things like absolute of fixed but that brings the footer to the bottom of the screen and in the middle of my page.

HTML
<div id="footer"></div>

CSS
#footer{ 
bottom: 0;
}

So to make the question short: How do I place a footer on the bottom of the page not screen.

Answer 1

If you use position:absolute; the footer will be ON the other elements and will not follow the page's element order. Than, if you use position:fixed;, sure it will be in a FIXED position, and this is not your desired result.

So DONT USE position absolute or fixed;

If your footer is the last element of the page, it will be the last element of the page automatically.

Answer 2

do you think on sticky footer? :)

or you just want footer after content, just make

footer {
 position: relative;
}

Answer 3

If you get the html and can't modify it manually, you can do it with JS (and JQuery but it is possible without it): jsFiddle

$(function() {
    $('body').append($('#footer').detach());
});

Answer 4

If you don't assign any style to your footer and keep it as the last element after your body content, it will remain at the bottom of the page.

Assuming your body content is too short to cover the full height of the page (for whatever reasons, maybe no content) but you still want to keep the footer at the bottom of the page, you can read this short tutorial or see the demo. If your content is longer than the viewport height, this footer will still remain at the bottom of the page and not fixed to viewport.

Basically you need to make the content or container above the footer to occupy 100% of the height of viewport. Then, place the footer after the content / container with the following CSS :

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

What happens here is that the footer will occupy 3em height but you 'pull' it back with the same value but negative margin-top. It's cleared to make sure there's no elements on both sides but you may exclude that.

Then, to prevent it from overlapping on your content, the container of content or content itself should have padding-bottom of the same value (in this case, 3em).