Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. FJ
    Permalink to comment#
  2. Permalink to comment#

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

    footer {
    ...
    }

    Should be:

    #footer {
    ...
    }

    – Kevin

  3. TNk
    Permalink to comment#

    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));
    }
  4. Jojo
    Permalink to comment#

    It doesn’t validate unfortunately.

  5. Falkon
    Permalink to comment#

    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

      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
    Permalink to comment#

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

    thanks in advance.

  7. Falkon
    Permalink to comment#

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

  8. gnightly
    Permalink to comment#

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

    thanks!

  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!

  10. 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?

  11. Permalink to comment#

    Hi where is the talked code?

  12. Vyse69
    Permalink to comment#

    For a centered and fixd footer with all navigators
    (Pour un pied de page centré et fixe avec tous les navigateurs)

    IE / Firefox / Chrome / Safari / etc…

    #footer {
    bottom:0px;
    height:30;
    right:0%;
    left:0%;
    position:fixed!important;
    position:absolute;
    width=100%;
    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’);
    text-align:center;
    visibility:visible;
    }

  13. Vyse69
    Permalink to comment#

    Oh no… it’s nnot complet !

  14. Vyse69
    Permalink to comment#

    That is…

    #footer {
    bottom:0px;
    height:30;
    right:0%;
    left:0%;
    position:fixed!important;
    position:absolute;
    width=100%;
    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');
    text-align:center;
    visibility:visible;
    }
  15. nuno
    Permalink to comment#

    thank u sooo much …. after so many days of trouble, the best one i found !
    works perfectly. rock on

  16. thanks guys
    please add

    html, body { height:100%;}

    for firefox, opera and chrome browsers.

  17. Thanks guys .. nice work…
    but as i have seen the demo, it does’nt actually stick to the bottom..always 10px margin from bottom.. ” its after i scroll the page”
    ..
    still great work :-)

  18. Pardon.. i was referring to sticky Footer.. wrong thread…

    Ash

  19. And for Css Ipad?

  20. Ab

    hi .. I have a code like thies below and i am trying to insert footer in word :

    my Footer

    but unfortunately this is not working.. it is considering my footer in Body itself and when word is generated and if data is more then in print layout the footer goes to next screen and that too on the top and not at the end of page..
    can you help me out to fix this.. I need to display the fixed footer at the bottom of each word page even if amount of data is more..

  21. SA
    Permalink to comment#

    How can we implement this on Windows Mobile ?

  22. vega
    Permalink to comment#

    I have used the following .. but anyway the footer is not fixing…

    html, body {height: 100%;}
    
    #wrap {min-height: 100%;}
    
    #main {overflow:auto;
    	padding-bottom: 72px;}  /* must be same height as the footer */
    
    #footer {
    	position:fixed; z-index:999;
    	width:100%;
        bottom:-20px;
    	margin-top: -72px; /* negative value of footer height */
    	margin-top: 0px !ie; /* for IE */
    	height: 92px;
    	clear:both; text-align:center;
    	background:url(../bg.png) repeat-x #115c9c;
    	} 
    
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/
    }
    
    /* 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');
    }
    • vega
      Permalink to comment#

      In all browsers including IE footer has been fixed .. but in Windows mobile it is not working
      .

  23. Bryant ‘s code works like a charm, look no further, cheers a lot!

  24. Hi! I’m looking for a similar thing but I rather want it to float on the left or right in the vertical-center.
    For example:
    If you see http://www.css3.com/css-float/
    On the right hand side they have a red button on the above url called “Feedback”
    I need something like that with a bit of a shadow to make it look better.
    Do you have an example showing such a thing?
    Please help! Thank you :-)

    Kind Regards,
    Ning.
    P.S. Btw, this is a very nice tutorial as well and I’ve stored it in my book for when I need a stuck/floating footer.

  25. Permalink to comment#

    Lots of thanks! I had a tough time figuring this out :D

  26. Why do we have to set the width to 100% of a div element after declaring it as position:fixed? Does it make it inline?

  27. Ty Chanravy
    Permalink to comment#

    I wonder how my footer go when I assign my content to auto.. for display data

  28. Sharma
    Permalink to comment#

    woked awesome

  29. Paul
    Permalink to comment#

    This works ok but its not very useful to me, I wouldnt ever want the footers position: fixed because with more content the footer is ALWAYS visible which looks rubbish IMO.

    Still useful if this is the effect you’re after.

  30. Hi There !
    I have problem with the fixed footer ! when i used fixed footer the content going under the footer but when i used the sticky footer the problem solved !

    then what is usage of fixed footer ? ( fixed footer just help our to keep our footer to bottom of page but we have problem with this i said at top ! ) so what is fixed footer usage ?

    I Search for too numbers of sticky footer but i don’t now what is the BEST of THEM ( Like work with most browsers and … ) ?

    Best Regards
    Arian Tashakkor

  31. vikas Pathak
    Permalink to comment#

    what is difference between following css code

    footer
    {
    background:brown;
    }
    .footer
    {
    background:brown;
    }

    • Shawn
      Permalink to comment#

      The first one would target all elements whereof the tag name is footer (), whereas the second one would target all elements whereof the class name is footer (

      <

      div class=”footer”>).

  32. Thank You guys so much.

    alert(“security problem”)
    Just one thing thought.

    How can I make sure that other html elements do not go behind the footer. It’s quite anoying and renders them unreadable.

    Check out the jsfiddle Here

    Thank You,
    Daniel F

    • Sorry about the script, it didn’t show up in the preview and I was wondering what would happen

  33. Can footers be created with php ?? I mean, which one would be better ?

  34. joe
    Permalink to comment#

    Thank you! I’ve been looking for this everywhere!

  35. James
    Permalink to comment#

    This was extremely useful! Cheers matey!

  36. Sylvia Rangel

    Can I just say, omg thank you!! I have been trying all the footer codes on the web for hours. Then I hit on you simple code and it worked perfect!

  37. Thank you so much but i gotta problem when i change the width the footer standing to the left corner of page.what can i do abut this problem because i want my footer be in 75% nit 100&.

  38. Amarnath Reddy
    Permalink to comment#

    Thanks

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".