I don't know if this is a weird question or not, but this is what I was thinking of doing. I was going to build my footer to extend a couple hundred pixels below the actual footer content, then use a png with transparency gradient to blend the bottom of the footer back into the page background to account for pages with very limited content on them where the footer may not be close to the actual bottom of the browser window. The problem I ran into when trying to do this was trying to stop the page from including the bottom of the footer on longer pages when there WAS enough content to push the footer to the bottom. I tried a couple different ways, setting various div positions and sliding them off screen, but they just causes the browser to stretch farther to display the entire footer. So, is this something you can do? I seem to remember playing around with a 'sticky footer' a little while back that moved content off screen, but I don't remember what caused this. Thanks for any help.
Well... maybe I'm not explaining what it is I'm trying to do very well, so I'll use some images to try and help illustrate this. The site I'm working on is http://www.skullcrow.com The footer has a couple of background images built into it that are several hundred pixels taller than the content of the footer, which works just like It should on shorter pages. ...but on pages where the content stretches the page, the footer creates a gap at the bottom of the page. ...so I want to build the footer in a way that tells the browser "The page content ends here, you don't have to show the stuff below here" to eliminate the gap on larger pages. ... So the same footer file works on both shorter and longer pages, and creates the effect I'm looking for on the shorter ones. Obviously, I could fix it by redoing the footer without the pixels on bottom, but I wanted to see if this is possible to do.
Anything? Anybody? Is it because nobody understands what I'm asking, or is it because nobody knows how... or just that what I'm asking is stupid?
You may use : position:absolute; and z-index:3 for the footer div and absolutly position it at the bottom
I thought I understood but the screenshots confuzled me : ) Is that fadey gradient part of the footer? Or the body? A sticky footer is a footer who remains either at the bottom of the page content OR at the bottom of the user's screen (when there's not enough content). That might be what you want, although depending on your userbase, sometimes it's just easier to say, most of my users don't have screens exceeding x height in pixels, so I'll just set my main content div's min-height to x-em which would be a bit over the x-pixels. Sometimes this is enough, and longer pages would simply be longer than the min-height, without making extra empty space that makes a scroll bar. A sticky footer is a bit more complicated. If you google it, you'll see a couple are garbage ones (you'll know they're garbage because they use an empty HTML element to do it, which isn't necessary... usually called "push") and a few good ones. You could try one out and see if it does what you want, but you'd better be aware of what's actually happening, so you know what to do if something weird happens. Also be aware that your footer MUST be stuck with a fixed height. It can be a height in em's, but it's fixed. Hmm, I know he's got a better one, but... http://www.pmob.co.uk/temp/spointfooter.htm But this one still has some issues. If you're not writing for IE5, leave that junk out. #outer will instead be whatever element you're already using to wrap your main page (most people have something wrapping their entire page). Like #outer, your page wrapper must no longer include the footer. Instead, the footer becomes a sibling of your page wrapper. <body> <wrapper/> <footer/> </body> And he's got a clearing element still. This is because of the floats. Now possibly the footer could still clear them, or any inner box who's wrapping them could have overflow: hidden on it, or possibly you could get away with overflow: hidden on the main wrapper (though this can bite users with super text enlarge and IE6 needs overflow: visible for in-page links to work) or some other clearing technique (even clearfix). But, dunno if this will get you what you want.
Not sure exactly what you're saying I should do here, although I definately don't want to use z-index:3 as that makes the background of the footer overlap the actual content near the bottom of the page. Stomme: Thanks for replying, and no I'm not trying to create a sticky footer. Basically what I was trying to show in the 1st and 3rd screen shots is how I WANT the footer to display on long and short pages (1st page is how the footer displays on short pages, 3rd shot is how footer SHOULD display on longer pages). The 2nd image is how it currently displays for longer pages, which I don't want it to do. The footer is currently 3 layers thick. The black fading effect is a tiled png file with transparency, then the sidewalk texture is a tiled jpg over the top of the png, then the main content of the footer in the box in the middle. They're all contained within the footer div (which is located in an external php file). I had mentioned a sticky footer in a previous post, because I thought I recalled a sticky footer that I had put into a site a while back had caused some of the footer to slide off the bottom of the page without causing the browser window to stretch... effectively hiding a portion of that footer. At the time, it was a mistake which I fixed, but now I'm trying to intentionally cause part of the footer to be hidden outside of the browser window. Just not as a sticky footer, so that on short pages those pixels below the footer will be visible.
Well, but what if that faded grey thing was part of the body or some other full-height box? The body is one element who will not cause a scrollbar. As the footer stays up high (holding concrete and box images), the faded area would appear, being a body background, while longer pages, the footer would set the true bottom of the page (users would even scroll if necessary) and the footer would be all the way down and cover the body's faded bg. Of course this is hard if the body's already being put to work, but I've had it where, so long as html and body were height: 100%, I could have a bottom bg on html and top bg on the body... html, body { height: 100%; } (maybe it was html alone who needed height: 100%) html { background: #basecolour url(sumthin.png) 0 100% no-repeat; } body { background: (no colour) url(sumthinelse.png) 0 0 no-repeat; } Since it looks like your trouble is the new size of the footer... don't make that size part of the footer, but someone behind the footer who can't cause a scrollbar. There might be some way to let someone else hold this background, if they have overflow: hidden on them, but I'd have to play out how to make the overflow show when there's room. But when overflow is hidden on something, we know there won't be more scrollbar than necessary.