Posted By

soxiam on 04/16/07


Tagged

footer position


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

basicmagic


sticky footer


 / Published in: Other
 

  1. /*
  2. STICKER - A valid, easy to use CSS sticky footer by Ryan Fait
  3. This is the basic CSS you need along with the one extra empty
  4. div and the wrapper required to achieve the effect. I suggest
  5. that you leave the * { margin: 0; } code in while testing and
  6. building your site because margins do have a tendency to mess
  7. things up a bit. Have fun!
  8. Copyright (c) 2006-2007 Ryan Fait
  9. */
  10.  
  11. * {
  12. margin: 0;
  13. }
  14. html, body {
  15. height: 100%;
  16. }
  17. .wrapper {
  18. min-height: 100%;
  19. height: auto !important;
  20. height: 100%;
  21. margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
  22. }
  23. .footer, .push {
  24. height: 4em; /* .push must be the same height as .footer */
  25. }

Report this snippet  

You need to login to post a comment.