Вы находитесь на устаревшей версии сайта romka.eu. Она оставлена здесь на случай если я захочу поностальгировать по тому как выглядел интернет в 2012 году :) Так этот сайт выглядел с июня 2012 по февраль 2023. Эта версия сайта не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

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

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/.

1 Comment