What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Fixed Footer

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. FJ

    You can finde a preview here: http://www.flashjunior.ch/school/footers/fixed.cfm

    Reply ↓
  2. Kevin

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

    footer {
    ...
    }

    Should be:

    #footer {
    ...
    }

    - Kevin

    Reply ↓
  3. TNk

    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));
    }

    Reply ↓
  4. Jojo

    It doesn’t validate unfortunately.

    Reply ↓
  5. Falkon

    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

    Reply ↓
    • Laurel Pehrson

      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.

  6. Falkon

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

    thanks in advance.

    Reply ↓
  7. Falkon

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

    Reply ↓
  8. gnightly

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

    thanks!

    Reply ↓
  9. Abba Bryant

    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!

    Reply ↓
  10. Nathan Smith

    Hey bro, your stuff is great…I have one question regarding the fixed footer. One of my clients wants to implement this, but I’d really like it to stop at a point on the y-axis if the browser is a small height. What’s the best way you’ve run across to do this?

    Reply ↓

Speak, my friend

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 ~