Дырка под футером

Автор: Евгений Рыжков Дата публикации: 19.10.2009

Имеем обычную верстку, с прижатым подвалом (футером) к низу плюс есть блоки, которые появляются по какому-нибудь событию (напрмиер, по клику на кнопке, под ней появляется блок с текстом).

Проблема

В IE 6 при появлении такого блока, под подвалом появляется "дырка", несмотря на то, что он (подвал) прижат к низу.
Заметка баг появляется, только если появлящиеся блоки находятся в нормальном потоке блоков (т.е. без position: absolute/fixed). Баг может не показаться при первом показе блока, но при повторном и дальнейших показах есть.

Пример, демонстрирующий данный косяк (увидеть можно только в IE6).

Решение

Достаточно добавить подвалу float:

.footer {
[...]
float: left;
width: 100%;
}

Результат. Преимущества:

  • просто
  • валидно

Недостаток — из-за того, что float прижимает блок влево/право, для сайтов, выровненных по центру экрана приходится добавлять дополнительный контейнер, который выровняет подвал по центру.