Advanced Search

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

/ Published in: CSS
Save to your folder(s)
A CSS sticky footer
http://ryanfait.com/sticky-footer/
Copyright (c) 2006-2007 Ryan Fait

Expand | Embed | Plain Text

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.