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

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

Как расположить футер, чтобы он всегда находился внизу, даже тогда, когда содержимое не занимает всю страницу? Для этого, контенту нужно задать высоту 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: :???: :?: :!:

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Перейти к верхней панели