Закрепление подвала в нижней части страницы

Лестница в подвал или как закрепить подвал в нижней части страницы Недавно возник вопрос о том, как закрепить нижний контейнер (подвал) на странице так, чтобы при не большом количестве содержимого на странице он был прижат к нижней части окна браузера. А при увеличении содержимого, съезжал вместе вниз. Итак, исходная позиция:
<div class="content">основное содержимое страницы</div>
<div class="footer"> подвал</div>. В первоначальных стилях CSS, укажем минимальное оформление документа:

  1. *{margin: 0px 20px 0px; padding: 0;}
  2. *{font-size: 10px; font-family: Verdana; color:#333}
  3.  
  4. .content {
  5. background: #b6ff8b;
  6. min-height: 100%;
  7. }
  8.  
  9. .footer {
  10. background: #003399;
  11. }

Чтобы подвал был прижат к нижней части страницы при небольшом количестве содержимого, добавим контейнер, который будет служить опорой &ltdiv class="clear"></div>

контейнер div, являющийся опорой

И зададим class="clear" высоту (размер нужно сделать как и у подвала)

  1. .clear {
  2. height: 100px; /*ровно на высоту подвала*/
  3. }

А у самого подвала, укажем высоту и отступ сверху, чтобы подвал попадал в область контейнера с классом content

  1. .footer {
  2. background: #003399;
  3. /*размер должен совпадать с отступом margin ниже*/
  4. height: 100px;
  5. margin-top: -100px;
  6. }

Остается задать высоту документа 100%:

  1. /*внимание, для старых IE может потребоваться хак*/
  2. html,body {
  3. height: 100%;
  4. }

П.С. Добавляю вариант для страницы с фиксированной версткой. Вариантов верстки можно придумать много. Где-то на просторах рунета встречал генератор различных макетов страницы. Встретите, пишите)

Прикрепленный файлРазмер
footer.html2.27 кб
footer_fixed.html2.69 кб

Отправить комментарий

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, пьёте ли Вы кофе или рассылаете спам
2 + 8 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.