[CSS] page footer

Spider · 5 Oct 2006 at 09:55

I am using the following CSS code to position a footer at the bottom of each page on my site:

.footer
{
position:fixed;
bottom:1px;
width:100%;

}

What I want is for the footer to be at the bottom of the page or screen, whichever is largest (i.e. if I have a page with only a few lines of text, I need the footer at the base of the screen. This I have done by changing the positioning to relative, but then on larger pages the footer is midway through the page. However, with a fixed position, the content often over-laps the footer and it looks messy.

How can I align the footer so that

a) It always appears beneath any content on the page
and
b) is always at least at the bottom of the screen

Probably simple for anyone with CSS experience to answer I know. I've experiements with fixed, absolute, static and relative positioning, but nothing gives the behaviour i want.

Thanks

monkeysmith · 5 Oct 2006 at 12:29

Code:

margin-bottom:0px;

Try that, might have to find a fix for IE though.

MagSafe · 5 Oct 2006 at 14:14

Try putting in clear: both; into that bit of css, and then if you want to arrange the layers of each area use z-index: 2; which will place that particular area 1 layer above the others ... To give you an idea of how it works; if you were wanting to place another layer on top of that you would use 3 instead of 2.

probedb · 5 Oct 2006 at 14:34

You should need the position thing at all depending how the rest of the page works. I agree with the clear:both assuming you've floated other content.

huppy · 5 Oct 2006 at 15:13

I think that -from as far as i can tell- what you're trying to do isn't really possible without some quite complex javascript.

As far as i can tell you want to either place the footer fixed on the bottom edge of the page if it isn't necessary for the page to scroll downwards (i.e. the content only takes up the upper quarter of the page), or if the page does have to scroll, you then want it at the bottom of the content, not fixed on the bottom edge of the page (although it will be by design).

I can't think of a CSS way to do this, i think you need a bit of javascript to sort it out.

TheCrow · 5 Oct 2006 at 17:52

depending on colors etc, would height: 100%; not work? Iv used it for liquid widths, havent tried height yet.

joeyjojo · 5 Oct 2006 at 21:22

Footers are a nightmare, as I've said many times before.

The method you use will depend a lot on the structure of the rest of the page. You don't necessarily need javascript, I've seen some pure css methods. Use google, and have a look at alistapart, particularly the "holy grail" article.

I would settle for it being at the bottom of the content, but not necessarily the bottom of the window. Setting certain heights to 100% might make it stick to the bottom of the window in opera or safari though, which would be a bonus.