Sent by Alex Robinson on 7 January 2005 17:05
>When I didn't hear from anyone on the list for a couple of days, I
>gave googling another shot. The one relevant page that I found was on
>the site for which you provided a link.
>
>http://scott.sauyet.com/CSS/Demo/FooterDemo1.html
>
>I tried applying this solution, but it didn't work, because while it
>put the footer at the bottom of the viewport, the 3 columns no longer
>extended to the footer, as you described. This was a much worse
>problem than that I was trying to fix. Yes, I *do* want all 3 columns
>to extend to the footer, as they do now. I suppose that makes this a
>more complex problem to solve. :-/
Hi Pabini
Actually Scott's page is linked to from the page on the Wiki I
pointed you to ;) There are a couple of similar but alternative
approaches listed there.
That url again
http://css-discuss.incutio.com/?page=FooterInfo
Though it may not look like much, out of the three examples on the
wiki page, http://home.earthlink.net/~landisdesign/footer.html is
probably the most robust cross browser. (caveat: just an impression
gained by briefly looking at them in a range of browsers, not based
on a comprehensive test or any attempt to figure out the differences
between them)
The solution to extending the columns is still the "faux columns"
approach. I've mocked up a version here:
http://www.fu2k.org/alex/css/cssjunk/footeratbottom
First off, because the footer is absolutely positioned it requires
that you can be pretty sure of how tall it will be so that you can
give sufficient spacing under the actual content. That probably won't
be a problem, but in the example text it is - the only way to
guarantee that the footer wouldn't obscure the last lines at any
viewport size is to put more space than you probably would want after
the content.
Next, this method goes wrong in Opera since it always puts the footer
beneath the visible area of the viewport regardless of whether or not
there is enough content to fill it (and IE Mac but I'm going to
forget about that since the best you can aim for there is graceful
degradation).
Furthermore all these methods have a problem in Safari - Safari
doesn't understand min-height and so the footer just sits underneath
the main content as normal.
There is a fix for min-height in Safari courtesy of Dave Shea
http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/
but it doesn't really help us here. Or rather I haven't figured out a
way to do it - using the min-height hack appears to make Safari
calculate that the body's height is the viewport's height + the
content's height which shunts the footer offscreen.
If you don't care about Safari or Opera support, this is of course
irrelevant, things work well enough in Firefox and IE Win. (BTW your
page fails to render at all in Safari. Which may or may not have
something to do with the page not being valid.)
Frankly, I don't think any of these methods are really robust enough
to warrant their use. I know you'd rather not, but I'd consider
locking the footer in place using some form of fixed positioning
(fake or not). Or maybe stick with a table-based layout in quirks
mode.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
