5 replies [Last post]
AdamSee
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2006-01-09
Posts: 14
Points: 0

The site footer needs to do is sit at the very bottom of document, or at the bottom of the browser view-port (viewing area). Whichever is furthest.

If the document contents are smaller than the window, the footer must sit at the bottom of the browser view-port.

view-port one image

If the content overflows, ‘past the fold’, it must be pushed down to sit at the bottom of the document.

view-port two image

The grey box represents the browser viewing area.

I've been giving this little problem some quality hours after a client suggested they wanted the ability in their site. I couldn't think of a way to do it, in a flexible way (changing amount of texts in each page you see) and support IE6 as well. All my elements area floated.

Possible? Or JavaScript required?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

A piece of cake to implement

A piece of cake to implement - an article on themaninblue.com called "footerstickalt".

Out of interest, what methods did you try to achieve it?

Verschwindende wrote:
  • CSS doesn't make pies

AdamSee
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2006-01-09
Posts: 14
Points: 0

Bellissimo

Beautiful - It sort of worked, but the updated alt method (http://www.themaninblue.com/writing/perspective/2005/08/29/) seemed to cause some problems in every browser but Firefox (IE5,6,Opera). When more content was put in (it underlaps the footer).

I'm not in a thinking mood at the moment (I just tried to close an 'a' element with a self-closing tag '/>'!), but I'll give it a go tomorrow when brain is back online.

Viewport footer

Document footer

Methods I tried:

I tried a 95% and auto heights, nonFooter area and 5% footer area for height. Of course it doesn't fill like I'd have hoped it would have.

Another acceptable solution was creating a position fixed and used absolute for IE6. Unfortunately when the content expanded, the footer would overlap the scrollbar in IE (expected). So I reduced the size of the footer, only for it to ruin the design in IE.

I also attempted to vertically align the footer to the bottom, using a percentage width of margins to push it away.

Thanks Pine, your link was most helpful.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You probably need to add

You probably need to add some padding or margin to the bottom of the content element, bear in mind that this footer technique removes effectively the top margin from footer it's as though footer does not have substance. A negative top margin equal to it's own height pulls the footer into the element '#wrapper' above it, but the content that is actually last in '#wrapper' still sees the bottom of '#wrapper' as it's boundary so you need padding or margin equal to - plus a bit extra - the height of the footer to ensure it doesn't slip bellow it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

AdamSee wrote:Thanks Pine,

AdamSee wrote:
Thanks Pine, your link was most helpful.

You're welcome Laughing out loud Footerstickalt is pretty much (imo anyway) the defacto method for having a footer at the bottom of the viewport or the content.

Verschwindende wrote:
  • CSS doesn't make pies

AdamSee
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2006-01-09
Posts: 14
Points: 0

That's right. A bit of

That's right. A bit of padding on the bottom of the content sorted it. Then dealing with the IE6/5 quirks.

Lovely Smile