9

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!

r_31415
  • 8,752
  • 17
  • 74
  • 121

4 Answers4

2

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

Jason
  • 3,021
  • 1
  • 23
  • 25
  • 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: http://jsfiddle.net/rqsaB/ – r_31415 Mar 10 '12 at 00:41
  • 1
    I fixed your fiddle, and Jason forgot to add the negative margin to his code, although he does refer to it in his explanation: http://jsfiddle.net/rqsaB/1/ - note that I added `line-height: 20px` and `margin-top: -21px` (because of your 1px border) – stephenmurdoch Mar 10 '12 at 02:34
  • @stephenmurdoch Works great. Does it have any drawbacks I should know? It seems to good to be true :-) – r_31415 Mar 10 '12 at 06:24
  • Right, I left out the fixed footer bit. I assumed he already had that working. I can add it. – Jason Mar 11 '12 at 04:30
  • 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 :) – Marcelo Mason Mar 11 '12 at 13:22
  • 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. – Jason Mar 12 '12 at 19:39
1

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.

Malitta N
  • 3,384
  • 22
  • 30
  • 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. – r_31415 Mar 09 '12 at 23:51
  • 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. – r_31415 Mar 10 '12 at 00:07
  • It seems your description match what I want. Let me try it out in a browser as a page instead of using fiddle. – r_31415 Mar 10 '12 at 00:09
  • 1
    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. – jmoerdyk Mar 10 '12 at 00:11
  • Yep, your javascript solution works fine. Of course, I would have wanted a CSS solution but it seems there is none. – r_31415 Mar 10 '12 at 00:29
  • By the way, +1 for providing a solution. – r_31415 Mar 10 '12 at 00:30
  • A clarification: I changed bodyHeight to contentHeight = $('#floatdiv').height() because the body was equal to winHeight. – r_31415 Mar 10 '12 at 00:32
0

For this you can use sticky footer technique for this.

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

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 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. – r_31415 Mar 10 '12 at 03:49
  • There no fixed height accept footer. Other div height define as an percentage height – sandeep Mar 10 '12 at 04:00
0

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/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86