Как прижать footer к нижнему краю окна

Понял, что каждый раз ищу это решение заново. Так что пусть тут повисит.

Суть: в контейнере для контента padding’ом делаем «кармашек» для footer’а, который равен ему по высоте. Сам footer позиционируем абсолютно, а body относительно. Перед контейнером для контента можно добавлять любые другие; header, например. Под катом пример кода и файл с разметкой для скачивания.

CSS может быть таким:


body {
  padding: 0px;
  margin: 0px;
  min-height: 100%;
  height: auto !important;
  position: relative;
}

#header {
  height: 40px;
  background-color: #ebebeb;
}

#page {
  padding-bottom: 70px;
}

#footer {
  height: 70px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: #ebebeb;
}

А теперь, собственно, сама разметка:


  <body>
    <div id='header'>Something very important...</div>
    <div id='page'>There's your content...</div>
    <div id='footer'>Bingo!</div>
  </body>

Скачать в файле: template

This entry was posted in Верстка, Технологии and tagged . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>