advanced code snippet search

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
 
Expand | Embed | Plain Text 
  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.