Кроссбраузерное позиционирование футера внизу страницы

Как расположить футер, чтобы он всегда находился внизу, даже тогда, когда содержимое не занимает всю страницу? Для этого, контенту нужно задать высоту 100%. Но, не все так просто, пока в статистике присутствует ИЕ6.

Кроссбраузерное решение достигается следующим способом. В CSS нужно написать:

body, html {
height: 100%; /* это обязательно, иначе футер внизу не будет */
}
#content {
min-height: 100%; /* для всех нормальных браузеров */
height: auto !important; /* для всех нормальных браузеров */
height: 100%; /* это для ИЕ6, вместо min-height */
margin-bottom: -7em; /* отступ для футера */
}
#footer {
height: 7em;
}

Но все же, при наличии ИЕ7, существует одна проблема. При увеличении высоты окна браузера, под футером образовывается пустота, которая сразу же исчезнет если изменить ширину окна браузера.


Понравилась статья? Поделиться с друзьями:
Комментарии: 16
  1. Dima Kos

    Сколько же этих способов, но этот самый распространённый.

    1. FORTRESS-DESIGN (автор)

      Простой и самый действенный :)

      1. Dima Kos

        ну да, с этим не поспоришь.

  2. Владимир

    Метод простой но для CMS не всегда подойдёт.

    1. FORTRESS-DESIGN (автор)

      А при чём здесь CMS? Прежде чем подключить к CMS, нужно сверстать макет. И то что будет прописано в CSS, то и будет использовать CMS. CMS не отвечает за верстку в целом, а использует сверстанный шаблон.

    2. Дмитрий

      Тоже не пойму при чем тут CMS

  3. Вадим

    При этом методе появляется полоса прокрутки хотя контента на странице нету совсем

    1. FORTRESS-DESIGN (автор)

      Вадим, а у вас есть более эффективное решение позиционирование футера?

  4. Вадим

    В том то и дело, что нету. В поиске этого решения для себя. Может подскажите почему именно так у меня футер уходит далеко в низ, что появляется полоса прокрутки?

    1. FORTRESS-DESIGN (автор)

      Вадим, я сейчас занимаюсь немного другим направлением, то что знаю и с чем сталкиваюсь, пишу в свой блог. Чтобы потом, если самому понадобится, было бы где посмотреть.

  5. Вадим

    Это вы хорошо делаете)

    1. Вадим

      Разобрался в чем была у меня проблема и этот метод также заработал!

  6. pikasso

    Человек …явно написал про СMS потому что не понимает в шаблонизации… ведь есть движки использующие чистый html+css а есть смарти который тоже самое использует но более раскидано по файлам шаблона и модулей.

    1. FORTRESS-DESIGN (автор)

      Pikasso, вы ничего не путаете? Здесь ни слова про СMS… Только чистый HTML+CSS.

  7. pikasso

    я про комментарий http://www.fortress-design.com/footer-down-template/comment-page-1/#comment-67271
    То что чистый HTML+CSS. это видно

    1. FORTRESS-DESIGN (автор)

      Теперь ясно :) Тогда ОК.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: