Search code examples
jquerycsspositionfooterfluid-layout

Footer at the bottom in fluid layout

I have a fluid layout but as a consequence, when there is no enough content in the page, my footer keeps moving up as in this example.

enter image description here

A popular solution to keep the footer at the bottom of the page is using position: fixed or position: absolute, however, when I do that, the content can collide with the footer on resizing (you can see what I mean here. Try to resize your window to the point in which the text is hiding behind the footer).

enter image description here

So how can I get a footer at the bottom but moving accordingly with the rest of the page in a fluid layout?

Thanks!

Solution

  • There's a CSS way to do this. Or at least there's one that works for all the browsers I support (back to IE7).

    I use the negative margin-top trick to stick the footer to the bottom of the page. That DIV is wrapped around the entire page contents instead of just the header, which suffices for most people. Let's say that DIV has a class "everything-but-the-footer". I then force the page to be at least window height. Full version that works on most browsers:

    html, body, .everything-but-the-footer {
    height: 100%;
}

.everything-but-the-footer {
    margin-top: -21px; // footer height + border * -1
    min-height: 100%
}

.footer {
    height: 20px;
    border-top-width: 1px;
}

.header {
    padding-top: 21px; // footer height + border
}

    Note that the JSFiddle technique listed in the comments doesn't work on IE at all and on Chrome doesn't solve the stated problem (footer and contents overlapping).