Posted By

rogalski on 10/17/10


Tagged

footer sticky


Versions (?)

Who likes this?

12 people have marked this snippet as a favorite

trusktr
luman
maltem
riebschlager
kwameboame
dcoulton
zanetaylor
wildrocker92
wirenaught
Roen
angiebowen
firstpass


Sticky CSS Footer


 / Published in: CSS
 

URL: http://www.cssstickyfooter.com

  1. Sample HTML...
  2. <div id="wrap">
  3. <div id="header"></div>
  4. <div id="main"></div>
  5. </div>
  6. <div id="footer"></div>
  7.  
  8. ...and the CSS
  9. html, body {height: 100%;}
  10.  
  11. #wrap {min-height: 100%;}
  12.  
  13. #main {overflow:auto;
  14. padding-bottom: 150px;} /* must be same height as the footer */
  15.  
  16. #footer {position: relative;
  17. margin-top: -150px; /* negative value of footer height */
  18. height: 150px;
  19. clear:both;}
  20.  
  21. /*Opera Fix*/
  22. body:before {
  23. content:"";
  24. height:100%;
  25. float:left;
  26. width:0;
  27. margin-top:-32767px;/
  28. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: trusktr on October 17, 2010

This is a neat trick. Thanks!

You need to login to post a comment.