Footer at the bottom in fluid layout

Question

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.

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).

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

Thanks!

Answer 1

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).

Answer 2

I dont think there is a proper solution using only CSS, however you can try giving your main content area a min-height. Set it to a safe height and if the content takes more space, it would expand accordingly.

Try this and see whether you are looking for something similar

http://jsfiddle.net/blackpla9ue/wCM7v/1/

What this does is, if the content area is smaller than your viewport, it positions the footer to the bottom of the viewport, and if its larger than the viewport it just stays at the bottom of the content like it is supposed to. An event is added to the resize event so even once you resize your browser, it would position itself appropriately.

Answer 3

For this you can use sticky footer technique for this.

Check this: http://jsfiddle.net/tM445/5/

Answer 4

I might do something like this... with a little jQuery.

var a = $('#floatdiv').height(); //get the height of the content
var b = $(window).height();      //get the height of the window
var c = $('footer').height();    //get the height of the footer
var d = b - c;                   //subtract the footer height from window height

if(a < b){                       //if the content is smaller than the window 
    $('#floatdiv').css('height', d + 'px');  //set the content height to the    
}                                            //window minus the footer

Example: http://jsfiddle.net/tM445/6/