Posted By

xavsio4 on 08/10/10


Tagged


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

colingardom
Elog
jplr
dext
Priestd09
fhenderson


Make the Footer Stick to the Bottom of a Page


 / Published in: CSS
 

URL: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

  1. Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
  2.  
  3. 1. * {
  4. 2. margin: 0;
  5. 3. }
  6. 4. html, body {
  7. 5. height: 100%;
  8. 6. }
  9. 7. .wrapper {
  10. 8. min-height: 100%;
  11. 9. height: auto !important;
  12. 10. height: 100%;
  13. 11. margin: 0 auto -4em;
  14. 12. }
  15. 13. .footer, .push {
  16. 14. height: 4em;
  17. 15. }
  18.  
  19. Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS.
  20.  
  21. 1. <html>
  22. 2. <head>
  23. 3. <link rel="stylesheet" href="layout.css" ... />
  24. 4. </head>
  25. 5. <body>
  26. 6. <div class="wrapper">
  27. 7. <p>Your website content here.</p>
  28. 8. <div class="push"></div>
  29. 9. </div>
  30. 10. <div class="footer">
  31. 11. <p>Copyright (c) 2008</p>
  32. 12. </div>
  33. 13. </body>
  34. 14. </html>

Report this snippet  

You need to login to post a comment.