PDA

View Full Version : sticky footer



sephiroth100
Jul 11th, 2010, 02:15 PM
Hi,

I've been struggling with some code for a couple of days now, and can't seem to find an answer to the following problem.

I would like to put a sticky footer at the bottom of the page. By this I mean that the page should always fill the screen vertically with the footer residing at the bottom.

There are plenty of sticky-footer solutions out there, but they don't seem to work with my page design.

My page consists of a header, a body and a footer like most. With the footer fixed at the bottom of the screen the body should stretch, however my body also has a background which should not overlap either the footer, nor the header. There are some transparent bits too so I can't just layer the header and footer over the top.

So, I know how to make the footer stick at the bottom, I know how to stretch the body - I just can't work out how to stretch the background of the body without encroaching on the header or footer space.

Any ideas or advice would be greatly appreciated.

Thanks

John

abduraooft
Jul 11th, 2010, 04:39 PM
There are plenty of sticky-footer solutions out there, but they don't seem to work with my page design.

So, I know how to make the footer stick at the bottom, I know how to stretch the body - I just can't work out how to stretch the background of the body without encroaching on the header or footer space.

Any ideas or advice would be greatly appreciated.
A link to your page is highly appreciated!

sephiroth100
Jul 11th, 2010, 07:35 PM
Hi,

I don't have a live site yet so I can't give you a direct link, however I've added an attachment which contains the page template.

8699

As you will see I have a bar at the top, the logo and search area then a menu. Beneath this is the page area I wish to stretch but as you can see it has a background image which I don't want to run into the header or the foot of the page.

Thanks

John

Keleth
Jul 11th, 2010, 10:22 PM
So you want that white space below the tabs and above the footer links to stretch? There's no simple way to do this. You can use min-height, but that'll change based on users' resolutions, and don't work in older browsers (namely IE). You can use JS to calculate the user's resolution, but that won't work when the user disables JS. You can play around with images, to basically make it LOOK like your body stretches to the bottom, and actually do a sticky footer, using the footer/header backgrounds to hide the body. Hopefully there are other ways someone more experienced can point out.

Other then that, you can put in content. Honestly, and I've seen it done too many times, too much white space looks horrible. A page is better with less white space and the bottom of the site not reaching the bottom of the window then the inverse.

By way the, the reason for seeing your site was to see your code so we could see if something is stopping you from using the typical sticky footer techniques... just an image of your site doesn't help much :p

tspek
Jul 12th, 2010, 01:58 PM
There are a few things that should be helpful on the net.

http://ryanfait.com/sticky-footer/

http://www.cssstickyfooter.com/

skywalker2208
Jul 12th, 2010, 06:59 PM
You could always sign up for a free hosting account. There are a bunch out there. I think I used this site (http://www.100webspace.com/) before for a class.