Posted By

masaya on 04/24/07


Tagged

css hack


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

basicmagic
fjm
capriciouslab


内容量に関わらず、常にフッターをページ下部に配置する方法


 / Published in: CSS
 

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

A CSS sticky footer http://ryanfait.com/sticky-footer/ Copyright (c) 2006-2007 Ryan Fait

  1. /* html */
  2.  
  3. <div class="wrapper">
  4. <div class="push"></div>
  5. </div>
  6. <div class="footer"></div>
  7.  
  8.  
  9.  
  10. /* CSS */
  11.  
  12. * {
  13. margin: 0;
  14. }
  15. html, body {
  16. height: 100%;
  17. }
  18. .wrapper {
  19. min-height: 100%;
  20. height: auto !important;
  21. height: 100%;
  22. margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
  23. }
  24. .footer, .push {
  25. height: 4em; /* .push must be the same height as .footer */
  26. }

Report this snippet  

You need to login to post a comment.