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


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.