Задача прибивания футера к низу страницы обмусолена с ног до головы. Она неплохо решается для футера фиксированной высоты. А вот для случая, когда высота футера зависит от его содержимого, методов не так много. Либо это очевидное решение на javascript. Либо подгонка для этого элементов, изначально для того не предназначенных. Я, конечно, о таблицах. Хочу предложить способ, который тоже имеет свои недостатки (обо всем ниже), но недостатки эти другие, и, следовательно, может подойти тем, кому первые два не подходят.
Для отправной точки нужен способ прибивания фиксированного футера. Способ с растягиванием одного элемента на 100%, а потом откусывания у него марджина снизу, равному высоте футера, не подойдет, потому что марджинг один раз задан и не может меняться динамически. Поэтому заготовкой будет метод растягивания body на 100% и указания для него position: relative. Футер здесь спозиционирован абсолютно, поэтому он «липнет» к краям body. Заползти на текст ему не дает дополнительный отступ у контента (в данном случае это элемент section, но это не принципиально).
В этом примере можно убрать у футера явное указание размера, напихать в него текста и получить прибитый к низу футер переменной высоты без JS и на блочных элементах. Но, если бы все было так просто, не было бы статьи. Такой футер закрывает контент, потому что его высота меняется, а отступ от нижнего края контента нет.
И тут на помощь приходит второй футер! Второй футер нужен для того, чтобы раздвигать нижнюю границу окна под контентом, чтобы туда мог поместится первый футер. Для этого он должен иметь в точности такие же стили, как и первый (за исключением добавленных специально для него), и должен полностью дублировать контент первого футера. Но при этом показывать его пользователю не нужно.
Таким образом, задание выполнено. Но недостатки метода налицо: разрастание html кода, плохое влияние на seo, нужно отдельно позаботиться о том, чтобы контент был одинаков в обоих блоках. Поэтому я предлагаю еще одну модификацию: дублировать футер нужно не на сервере, а на клиенте с помощью javascript. Принципиальное отличие от метода на javascript выше в том, что для этого метода javascript нужен только во время загрузки страницы. На нем не ведутся расчеты и он не считает размеры.
Окончательный вариант.
К сожалению, в процессе подготовки окончательного варианта выяснилось, что ie6 не клонирует содержимое тегов, которых не знает, поэтому $('footer').clone() в нем не работает. Пришлось заменить тег на див.
Для отправной точки нужен способ прибивания фиксированного футера. Способ с растягиванием одного элемента на 100%, а потом откусывания у него марджина снизу, равному высоте футера, не подойдет, потому что марджинг один раз задан и не может меняться динамически. Поэтому заготовкой будет метод растягивания body на 100% и указания для него position: relative. Футер здесь спозиционирован абсолютно, поэтому он «липнет» к краям body. Заползти на текст ему не дает дополнительный отступ у контента (в данном случае это элемент section, но это не принципиально).
В этом примере можно убрать у футера явное указание размера, напихать в него текста и получить прибитый к низу футер переменной высоты без JS и на блочных элементах. Но, если бы все было так просто, не было бы статьи. Такой футер закрывает контент, потому что его высота меняется, а отступ от нижнего края контента нет.
И тут на помощь приходит второй футер! Второй футер нужен для того, чтобы раздвигать нижнюю границу окна под контентом, чтобы туда мог поместится первый футер. Для этого он должен иметь в точности такие же стили, как и первый (за исключением добавленных специально для него), и должен полностью дублировать контент первого футера. Но при этом показывать его пользователю не нужно.
Таким образом, задание выполнено. Но недостатки метода налицо: разрастание html кода, плохое влияние на seo, нужно отдельно позаботиться о том, чтобы контент был одинаков в обоих блоках. Поэтому я предлагаю еще одну модификацию: дублировать футер нужно не на сервере, а на клиенте с помощью javascript. Принципиальное отличие от метода на javascript выше в том, что для этого метода javascript нужен только во время загрузки страницы. На нем не ведутся расчеты и он не считает размеры.
Окончательный вариант.
К сожалению, в процессе подготовки окончательного варианта выяснилось, что ie6 не клонирует содержимое тегов, которых не знает, поэтому $('footer').clone() в нем не работает. Пришлось заменить тег на див.
