Advanced Search

Sticky Footer Solution

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.