Posted By

justinseiter on 04/26/09


Tagged

css footer sticky


Versions (?)

Who likes this?

10 people have marked this snippet as a favorite

mikemckearingmailcom
Nix
dmatranga
jfherring
delarge
indamix
rbroen
gpenston
loric
m4tik


Sticky Footer Solution


 / Published in: CSS
 

URL: http://www.cssstickyfooter.com/

This sticky footer solution is working in all major browsers, including Google Chrome! It works with floated 2-column layouts and we don't get overlap in re-sized browser windows unlike older solutions you find when you Google sticky footer. And you don't need an empty push div.

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

Report this snippet  

You need to login to post a comment.