Code: footerStick

This technique is obsolete now that there is a more compatible and less buggy version… footerStickAlt.

Update: Important Warning!!!

If you’ve read this far, you’ve read too much. Look at the paragraph above this one and read it again. I’m not sure how I can explain this any better. THIS PAGE IS OBSOLETESTOP READING NOW!!! Read this and be happy.

Obsolete Technique…

Want to know how to force the footer of a webpage so that it sticks to the bottom of the viewport? Well, then… read on and prepare to be amazed. This is an advanced CSS tutorial so make sure you know what you are doing before you start tweaking.

Known Issues: 1. Non cached objects in the content area that do not have a height attribute set(like images) may cause render issues (fixed now with footerStickAlt). 2. This technique does not work in pre-Tiger versions of Safari or IE for the Mac. 3. Some versions of Opera do not redraw the footer on the fly like other browsers so you will have to reload the page after manual resizing.

For all of you code junkies out there, I’ll start out by showing you my example page. (Resize this window past the content to see that the footer will always stick to the bottom of the viewport).

footerStick Example

The almighty HTML
This is the stripped down code that I used in my example page. It is very important that the #container-foot comes after (not inside) the container-content.

  1. <div id="container-page">
  2. <div id="container-content">Content</div>
  3. <div id="container-foot">Foot</div>
  4. </div>

On to the CSS
I’ll break down the different parts and explain what’s happening on as we go along.

  1. html, body {
  2. margin: 0;
  3. padding: 0;
  4. height: 100%;
  5. }

IE and Mozilla based browsers require that both the HTML and BODY tag have the height set to 100% for this technique to work. Don’t ask me why, I just work here.

  1. #container-page {
  2. width: 600px;
  3. background: #DDD;
  4. position: relative;
  5. min-height: 100%;
  6. height: auto !important;
  7. height: 100%;
  8. }

Here we are telling the browser to make sure that the DIV wrapped around our page stretches to the maximum height of the viewport. (If you put a y-repeating background in this id it will span the entire height.)

The position: relative; part is really important. Do not forget this!

Notice the comments? min-height is not supported by IE but it treats the normal height similarly to the way other browsers treat min-height. Also, IE does not fully support !important so we can use this to “reset” the height to auto to keep it from getting screwy in Opera and Firefox. Confused yet? Me too.

  1. #container-content {
  2. padding-bottom: 40px;
  3. }

Here we are telling the content container to leave some space(the exact height of our footer) at the bottom of the page for our footer. If you leave this step out you may have some of your content text appear under your footer. We don’t want that now do we?

  1. #container-foot {
  2. width: 100%;
  3. background: #CCC;
  4. position: absolute;
  5. bottom: 0 !important;
  6. bottom: -1px;
  7. height: 40px;
  8. }

This is the container DIV for our footer. We must set the height here or this whole thing won’t work. Remember how I said that the #container-page id needed to have the position: relative; thingie? Well, if you leave that part out then this id’s position: absolute; part would make this page look… um, not good.

You’ll also notice that I’m using the !important trick again. Yeah, IE has this really anoying 1 pixel display bug. In certain resolutions (I’m not sure if it is even or odd) IE will leave a 1 pixel gap between the bottom of the footer and the viewport. This should take care of IE’s crapulence.

Well, I think that does it. Feel free to load up the example page and rip ‘er apart as much as you like.

footerStick Example


Recent Blog

  • No More

Recent Code

  • Nore more

RSS

©1992-2014 qrayg.com | all rights reserved.