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

Comments

  1. User Avatar
    FJ
    Permalink to comment#
  2. User Avatar
    Kevin
    Permalink to comment#

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

    footer {
    ...
    }

    Should be:

    #footer {
    ...
    }

    – Kevin

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Fixed.

    • User Avatar
      BJ
      Permalink to comment#

      unless if it works for html 5 (without #), right?

    • User Avatar
      Giorgi Gvimradze
      Permalink to comment#

      its a new tag in HTML 5, so it can be footer{} instead of #footer anyways :3

    • User Avatar
      To-mos
      Permalink to comment#

      You are mistaken, actually in HTML5 “footer” is completely valid if your calling on <footer> elements and not <div id="footer"> elements.

  3. User Avatar
    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. User Avatar
    Jojo
    Permalink to comment#

    It doesn’t validate unfortunately.

  5. User Avatar
    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

    • User Avatar
      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. User Avatar
    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. User Avatar
    Falkon
    Permalink to comment#

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

  8. User Avatar
    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. User Avatar
    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. User Avatar
    Nathan Smith
    Permalink to comment#

    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. User Avatar
    Sumcara
    Permalink to comment#

    Hi where is the talked code?

  12. User Avatar
    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. User Avatar
    Vyse69
    Permalink to comment#

    Oh no… it’s nnot complet !

  14. User Avatar
    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. User Avatar
    nuno
    Permalink to comment#

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

  16. User Avatar
    Nitasha
    Permalink to comment#

    thanks guys
    please add

    html, body { height:100%;}

    for firefox, opera and chrome browsers.

  17. User Avatar
    Ash

    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. User Avatar
    Ash

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

    Ash

  19. User Avatar
    caizinho

    And for Css Ipad?

  20. User Avatar
    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. User Avatar
    SA
    Permalink to comment#

    How can we implement this on Windows Mobile ?

  22. User Avatar
    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');
    }
    • User Avatar
      vega
      Permalink to comment#

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

  23. User Avatar
    Paul Sossa
    Permalink to comment#

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

  24. User Avatar
    Ning Sukham
    Permalink to comment#

    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. User Avatar
    Oscar
    Permalink to comment#

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

  26. User Avatar
    Praveen Puglia
    Permalink to comment#

    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?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Not inline, but not 100% wide either. Just one of those weird things.

  27. User Avatar
    Ty Chanravy
    Permalink to comment#

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

  28. User Avatar
    Sharma
    Permalink to comment#

    woked awesome

  29. User Avatar
    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. User Avatar
    Arian Tashakkor
    Permalink to comment#

    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. User Avatar
    vikas Pathak
    Permalink to comment#

    what is difference between following css code

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

    • User Avatar
      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. User Avatar
    Daniel F
    Permalink to comment#

    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

    • User Avatar
      Daniel F
      Permalink to comment#

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

  33. User Avatar
    Bhanu kumar
    Permalink to comment#

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

  34. User Avatar
    joe
    Permalink to comment#

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

  35. User Avatar
    James
    Permalink to comment#

    This was extremely useful! Cheers matey!

  36. User Avatar
    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. User Avatar
    Mohammad

    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. User Avatar
    Amarnath Reddy
    Permalink to comment#

    Thanks

  39. User Avatar
    Manoj mor

    i am facing problem in opera mini browser in mobile footer is not fixed on bottom

  40. User Avatar
    da]v[ax

    Hi guys, the Reference URL is dead :( Here’s the code in CodePen

    Cheers and thanks a lot for your brilliant site!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag