CSS / creating footer that is fixed to bottom of screen unless pushed

[TechBoyJK]

Hi Guys,

I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted.

The footer is a simple div that has centered text stating "page posted by $membername on $date"

What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page).

Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page.

Ideas?

 

[Cogman]

javascript is probably the only way that you can do this.

 

[Ka0t1x]

In CSS there's a min-height attribute, I believe its mostly cross-browser supportive.

 

[BoT]

or you could wrap the page in a div that has a height of 100% instead of px and set the footer on the bottom

 

[Woosta]

Google sticky footer.

 

[linkgoron]

The way to go here is use basic CSS.
Note: As usual, this won't work on IE6.

Anyway, all you have to do is create a div element and these css styles:

#fixedfooter
{
position: fixed;
bottom: 0;
left:0; /* you dont have to use this, but its useful sometimes. */
width: 100%;
height: 20px;
background-color: black; / *whatever */
color:white /* whatever */
}

<div id="fixedfooter">
Im Fixed!
</div>

 

[TechBoyJK]

Thanks Guys,

I actually found this.

http://www.cssstickyfooter.com/

This seems to be the winner. Works on all browsers even back to IE4

 

[Woosta]

you're welcome

 

[TechBoyJK]

Yup woosta it was your post which sent me in the right direction. Thanks again.