advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Ballyhoo

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


Plain TextExpand 
  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.