Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jecofish


Sticky Footer


 / Published in: CSS
 

  1. /* CSS: */
  2.  
  3. * { margin:0; padding:0; }
  4.  
  5. html, body, #wrap { height: 100%; }
  6.  
  7. body > #wrap {height: auto; min-height: 100%;}
  8.  
  9. #main { padding-bottom: 150px; } /* must be same height as the footer */
  10.  
  11. #footer {
  12. position: relative;
  13. margin-top: -150px; /* negative value of footer height */
  14. height: 150px;
  15. clear:both;
  16. }
  17.  
  18. /* CLEAR FIX*/
  19. .clearfix:after {content: ".";
  20. display: block;
  21. height: 0;
  22. clear: both;
  23. visibility: hidden;
  24. }
  25. .clearfix {display: inline-block;}
  26. /* Hides from IE-mac \*/
  27. * html .clearfix { height: 1%;}
  28. .clearfix {display: block;}
  29. /* End hide from IE-mac */
  30.  
  31. /* HTML: */
  32.  
  33. <div id="wrap">
  34. <div id="main" class="clearfix"></div>
  35. </div>
  36. <div id="footer"></div>

Report this snippet  

You need to login to post a comment.