Forcing footer to bottom of page

Question

Possible Duplicate:
CSS sticky footer

I am hard at work developing a webservice but i have run into a problem getting the websites footer to stay at the bottom of the page and its starting to become fustrating as i have tried every single "sticky footer" script their is and none seem to work.

#footer {
background:#212121 url(../images/footer.jpg) repeat-x;
height:50px;
position:absolute;
width:100%;
overflow:hidden;
}

Kind Regards,
Nathaniel Blackburn

It seems like he's asking how to make a footer div on the bottom of a web page. The code is implicit. — Jeremy Holovacs, Nov 16 '11 at 02:54
+1 for "kind regards". It's great to some extra friendliness around here — Dylan Valade, Nov 16 '11 at 03:19

score 6 · Answer 1 · answered Dec 17 '11 at 01:04

I devised this simple solution (tested it in Firefox and Chrome). First define this function in a javascript file:

function footer() {
    if ($(window).height() > $('body').height())
        {
        var extra = $(window).height() - $('body').height();
        $('footer').css('margin-top', extra);
        }
    }

And then simply call it when the document is ready, with jQuery.

Dylan Valade · Answer 2 · 2011-11-16T21:37:35.603

This isn't my favorite way to make footers but I think you're looking for position: fixed.

 #footer {
      background: #212121 url(../images/footer.jpg) repeat-x;
      bottom: 0;
      height: 50px;
      overflow: hidden;
      position: fixed;
      width: 100%; }

What you're running into with all of the other approaches is that pages like About Us have a <body> that is not as tall as the browser window so the footer is at the bottom of the page but not the window. You could either make some changes to make the body element taller or just go with with fixed, which means the footer should position itself relative to the browser window.

This does sound exactly like what he's looking for. – Jeremy Holovacs Nov 17 '11 at 13:35 — Jeremy Holovacs, Nov 17 '11 at 13:35

score 2 · Answer 3 · answered Nov 16 '11 at 03:02

2

Have you tried this CSS?

#footer {
    position: absolute;
    bottom: 0;
}

answered Nov 16 '11 at 03:02

Daniel T.

37,212
36
139
206

Yes, this doesn't seem to be working for me. – Nov 16 '11 at 03:04
This would need a relative position set container on the body element, and no hierarchy changing the positioning in between. Doable, but it also depends on the page being at least as long as the window, as I understand the question. – Jeremy Holovacs Nov 16 '11 at 23:03

Jeremy Holovacs · Answer 4 · 2011-11-17T03:33:01.943

0

Why not use CSS?

#footer{ position: fixed; left: 1em; right: 1em; bottom: 0em; text-align: center; }

put a

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

on the page with that css, and the footer will stick just fine.

(Despite suggestions to the contrary, this will not "mess up" a page. It will force the div to the bottom of the window, regardless of the size of the page. If there is some distinction to be made between floating and sticking, I can provide more context in how this sort of thing can be done.)

edited Nov 17 '11 at 03:33

answered Nov 16 '11 at 02:53

Jeremy Holovacs

22,480
33
117
254

That would mess up his page. All he has to do is change position of the footer to absolute. Then, set the width to 100%. It worked; I tried it. – nmagerko Nov 16 '11 at 02:57
Sorry, I want it to stick to the bottom, not float at the bottom. – Nov 16 '11 at 02:57
I'm not entirely sure how you're qualifying the difference? What functionality are you missing? @nmagerko, how do you expect that would mess up his page? I use this all the time, and it has never done so. – Jeremy Holovacs Nov 16 '11 at 16:54
Your page is not his page. I'm sure you understand the concept that with each differing class, a working technique changes drastically. – nmagerko Nov 16 '11 at 21:46
@nmagerko, Look, I'm not trying to be difficult here, but what are you going on about? How could a fixed position div ever mess up a page? it sticks to the bottom of the window, nothing else interferes. The only time that doesn't happen is if the browser doesn't support CSS 2.1. I would like an explanation of how this would "mess up" someone's page. Give me an example and I'll shut up about it. – Jeremy Holovacs Nov 16 '11 at 22:58
I think this is an extended discussion. That is enough. – nmagerko Nov 16 '11 at 23:22

score 0 · Answer 5 · answered Nov 16 '11 at 03:16

0

I have given this solution to someone else in a very similar problem:

#wrapper {
    min-height:1200px; //???
    max-height:1200px; //???
    position:relative;
    ....
}
#footer {
    position:absolute;
    bottom:0;
    left:0;
    ....
}

answered Nov 16 '11 at 03:16

zequinha-bsb

719
4
10

Forcing footer to bottom of page

5 Answers5