advanced code snippet search

Posted By

mariusscheel on 03/02/10


Tagged

footer sticky


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

jexton
stegwee
wirenaught


Sticky Footer

 / Published in: CSS
 

URL: http://www.cssstickyfooter.com/using-sticky-footer-code.html

this solution works fine for me. it avoids the extra div as for example in Ryan Fait's solution (which works, too.)

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

Report this snippet  

You need to login to post a comment.