Posted By

paulgrenwood on 09/23/09


Tagged

css footer


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

thesmu
l1r
wirenaught


Sticky Footer


 / Published in: CSS
 

  1. // HTML
  2.  
  3. <div id="wrap">
  4.  
  5. <div id="main" class="clearfix">
  6.  
  7. </div>
  8.  
  9. </div>
  10.  
  11. <div id="footer">
  12.  
  13. </div>
  14.  
  15.  
  16. // CSS
  17.  
  18. /*
  19. Sticky Footer Solution
  20. by Steve Hatcher
  21. http://stever.ca
  22. http://www.cssstickyfooter.com
  23. */
  24.  
  25. * {margin:0;padding:0;}
  26.  
  27. /* must declare 0 margins on everything, also for main layout components use padding, not
  28. vertical margins (top and bottom) to add spacing, else those margins get added to total height
  29. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
  30.  
  31. html, body, #wrap {height: 100%;}
  32.  
  33. body > #wrap {height: auto; min-height: 100%;}
  34.  
  35. #main {padding-bottom: 150px;} /* must be same height as the footer */
  36.  
  37. #footer {position: relative;
  38. margin-top: -150px; /* negative value of footer height */
  39. height: 150px;
  40. clear:both;}
  41.  
  42. /* CLEAR FIX*/
  43. .clearfix:after {content: ".";
  44. display: block;
  45. height: 0;
  46. clear: both;
  47. visibility: hidden;}
  48. .clearfix {display: inline-block;}
  49. /* Hides from IE-mac \*/
  50. * html .clearfix { height: 1%;}
  51. .clearfix {display: block;}
  52. /* End hide from IE-mac */

Report this snippet  

You need to login to post a comment.