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!

Illaudable

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

Loggia

Interesting but doesn't it add a scrollbar to the page, so I need to scroll a bit down to see the footer? Although, I'm probably misunderstanding this technique. Here is my test: jsfiddle.net/rqsaB – Illaudable

I fixed your fiddle, and Jason forgot to add the negative margin to his code, although he does refer to it in his explanation: jsfiddle.net/rqsaB/1 - note that I added line-height: 20px and margin-top: -21px (because of your 1px border) – Hemelytron

@Hemelytron Works great. Does it have any drawbacks I should know? It seems to good to be true :-) – Illaudable

Right, I left out the fixed footer bit. I assumed he already had that working. I can add it. – Loggia

Beautiful. Was looking around for an unrelated css fix and came onto this negative margin trick and fixed my footer without even realizing i was doing it wrong, this is much cleaner :) – Sheena

Thanks for the assist Stephen. I do it a bit differently (now reflected in JSFiddle). The code now works in IE8 and Chrome. It also works in IE7 but I think JSFiddle's iframe CSS is glitching the footer. Should work standalone. – Loggia

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.

Drink

Oh, I forgot to mention that. Yes, that's an option but it's hard to guess an appropriate min-height given the wide array of available viewports. I'm hoping to find a CSS solution, but if all else fails, I will have to use javascript. – Illaudable

Thanks, but that's not what I'm looking for. Now that I think about it, it's kind of tricky. I want that in normal conditions, the footer stays at the bottom, but if there is some resizing that pushes the content down, then the footer must follow suit. – Illaudable

It seems your description match what I want. Let me try it out in a browser as a page instead of using fiddle. – Illaudable

Sticky footers are usually implemented with an margin-bottom added to the main content that's equal to the height of the footer to prevent the content from colliding/overlapping. Without a fixed footer height, there really is no CSS only way of accomplish it, you're going to need javascript. – Hyphenated

Yep, your javascript solution works fine. Of course, I would have wanted a CSS solution but it seems there is none. – Illaudable

By the way, +1 for providing a solution. – Illaudable

A clarification: I changed bodyHeight to contentHeight = $('#floatdiv').height() because the body was equal to winHeight. – Illaudable

Answer 3

For this you can use sticky footer technique for this.

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

Valeryvalerye

Thanks for your answer. As far as I can see, it needs to have a fixed height, so it won't work in a fluid layout. – Illaudable

There no fixed height accept footer. Other div height define as an percentage height – Valeryvalerye

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/

Jaffa