Hi,
I’m having some problems with a website I’m designing. The footer at the bottom of the page wont snug up to the bottom of the screen, creating a strip at the bottom of the page that is the background colour. It can be seen at http://newwebsite.prosperaplace.com/ . This happened after shrinking the footer-contents to 80 px, it was fine when it was 200 px but it needs to be smaller to fit the content. Any ideas?
Hi again,
I’ve realized that I don’t want to set a specific height for the footer, so that people with bigger screens will never encounter a problem with having a strip at the bottom. The obvious answer to me is to set the height of the footer contents to 100%, but when i do that it cuts the footer image off even shorter, so that it doesn’t even cover behind the text/images in the footer. So I guess now my question in how can I make the footer image span to the bottom of the page, no matter how big a screen is. Thanks!
I’m not seeing the strip in either Opera or Firefox.
I see it. (I think I may be using a bigger monitor.) It’s only a problem on pages - like the home page - without a great deal of content.
I think you’re looking for a “sticky footer”, as explained here.
Thanks for the reply, I’ll take a look at the link and try it out.
Personally, I prefer to let the footer site snugly under the content, even if it’s a short page with little content. To avoid the ugly gap under the footer on big screens, I just set the footer color on the body of the site, so that the footer color always extends to the bottom of the screen.
Ralph.m: I would use this option because I like a footer to be right under content, but my footer has a diagonal stripe pattern to it. I was thinking that maybe there’s a way to ‘fade’ the footer image to just a background colour. Do you know how this could be done?
TechnoBear: I got the sticky footer to work, but now I have another problem: Instead of a blank strip under the footer, I now have one between the content and the footer. Ahhh!
I think I’ve got the sticky footer all figured out now… although the ‘push’ element makes the content have blank space at the bottom, even on pages that have enough content to go beyond the fold. If anyone has any suggestions, I’d appreciate it. If not… I give up for now.
You could either just put that striped image on the body instead (if you don’t mind having it extend all the way to the bottom of short pages), or you could alter that striped image in such a way that it fades to a solid color at the bottom which then matches the background color on the body element. That’s quite easy in Photoshop.
Duh! Thanks… It’s definitely a Monday for me!
Ahh looks like I’m sticking with the sticky footer. I can’t get the background colour to change. Ralph, you kept mentioning body but I definitely don’t want to set the background colour for the body to be the same as the footer image, as then the whole websites background colour or image would be that colour.
Yes, it requires a few other tweaks, such as having the content area inside a 100% wide div with a white background, so it’s best to use this strategy from the start if that’s the plan.
E.g. In your case, you’d place a div around #main-wrap and set it to width: 100% and a black background. Then you could safely put the reddish color on the body and it would only show from the footer downwards.