Футер, прибитый к низу страницы

Submitted by Ромка on Вс, 27/03/2011 - 13:36

Ромка аватар

Давно не занимался версткой, сейчас понадобилось сверстать страницу с прибитым к низу страницы футером, помню что раньше не мог найти простого и универсального решения этой задачи, по этому обрадовался, когда нашел вот это решение: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/.

Css:

  1. * {
  2. margin: 0;
  3. }
  4.  
  5. html, body {
  6. height: 100%;
  7. }
  8.  
  9. .wrapper {
  10. min-height: 100%;
  11. height: auto !important;
  12. height: 100%;
  13. margin: 0 auto -4em;
  14. }
  15.  
  16. .footer, .push {
  17. height: 4em;
  18. }

Html:

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="layout.css" ... />
  4. </head>
  5. <body>
  6. <div class="wrapper">
  7. <p>Your website content here.</p>
  8. <div class="push"></div>
  9. </div>
  10. <div class="footer">
  11. <p>Copyright (c) 2008</p>
  12. </div>
  13. </body>
  14. </html>

Для многоколоночной верстки нужно добавить атрибут "clear: both;" к классу .footer, .push.

Действующий пример: http://ryanfait.com/sticky-footer/.

2 Comments