advanced code snippet search

Posted By

WebPersonality on 05/26/12


Tagged


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Dane_Collins
nbreslow
ruijscosta


Sticky Footer

 / Published in: CSS
 

URL: http://ryanfait.com/sticky-footer/

What really does the trick is html & body height set to 100% and using negative margins...

Expand | Embed | Plain Text 
  1. * {
  2. 	margin: 0;
  3. }
  4. html, body {
  5. 	height: 100%;
  6. }
  7. .wrapper {
  8. 	min-height: 100%;
  9. 	height: auto !important;
  10. 	height: 100%;
  11. 	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
  12. }
  13. .footer, .push {
  14. 	height: 142px; /* .push must be the same height as .footer */
  15. }
  16.  
  17. /*
  18.  
  19. Sticky Footer by Ryan Fait
  20. http://ryanfait.com/
  21.  
  22. */

Report this snippet  

You need to login to post a comment.