Advanced Search

Sticky Footer (make footer always be on bottom without absolute positioning)

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.