A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » CSS » Fixed Footer Submit one!

Fixed Footer

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Reference URL

Subscribe to The Thread

  1. Kevin says:

    You seem to have forgotten an id identifier (#).

    footer {
    ...
    }

    Should be:

    #footer {
    ...
    }

    - Kevin

  2. TNk says:

    For IE6 an alternative expression code used in http://www.ea.com.

    To prevent the infinite scroll when #footer have border use negative margin-top of the same width (of the border).


    *html #footer {
    margin-top: -2px; /* prevents infinite scroll if #footer have a border of 2px*/
    position: absolute;
    top: expression(documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight));
    }

  3. Jojo says:

    It doesn’t validate unfortunately.

  4. Falkon says:

    Hi Chris,
    With all due respect, I am getting this whole idea started recently and getting also involved with webdesign. any possibility for you to explain do I have to do anything in the html site of it to make this happen or is it that just change the footer info in css page???

    I would appreciate your help.

    Thank you very much in advance.
    ( I am working with DW CS4)

    Looking forward to hearing from you soon,

    Falkon

    • Laurel Pehrson says:

      Just put this in the body of the html:
      Your text here :D

      Put the CSS in the header in tags or place it in an external stylesheet.

      Spring into HTML and CSS by Molly E. Holyschlag is a great book for beginners.

  5. Falkon says:

    Hi guys I tried this code, now I have no footer period…what am I doing wrong? please help.

    thanks in advance.

  6. Falkon says:

    it worked with the other template but this one, I just lost the whole footer.

  7. gnightly says:

    Hi, this works perfectly on Chrome/Firefox, but doesn’t in Safari – any idea why and how to get around fixing this?

    thanks!

  8. Abba Bryant says:

    Try this – works for me in every situation I’ve used it.

    http://www.cssstickyfooter.com/using-sticky-footer-code.html

    Best part, no expressions!

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---