Задача прикрепить футер к низу страницы решена с ног до головы.
Это хорошо работает для нижнего колонтитула фиксированной высоты.
А вот для случая, когда высота футера зависит от его содержимого, способов не так много.
Либо это очевидное решение в JavaScript .
Либо корректируя для этой цели элементы, которые изначально для этого не предназначались.
Я, конечно, о столах .
Я хочу предложить метод, который тоже имеет свои недостатки (подробнее обо всех ниже), но эти недостатки разные, а, следовательно, может подойти тем, кому первые два не подходят. В качестве отправной точки вам нужен способ закрепить фиксированный нижний колонтитул.
Метод растягивания одного элемента на 100% и последующего отрезания его нижнего поля, равного высоте футера, не подойдет, поскольку поле задается один раз и не может изменяться динамически.
Поэтому заготовка будет метод растяжки тела на 100% и инструкции для него.
Позиция: относительная.
Футер здесь расположен абсолютно, поэтому «прилипает» к краям тела.
Наползать на текст ему препятствует дополнительный отступ контента (в данном случае это элемент раздела, но это не важно).
В этом примере вы можете удалить явное указание размера из нижнего колонтитула, вставить в него какой-нибудь текст и получить футер переменной высоты, прибитый снизу без JS и на блочных элементах .
Но если бы все было так просто, статьи бы не было.
Этот нижний колонтитул закрывает содержимое, поскольку его высота изменяется, но отступ от нижнего края содержимого отсутствует. И здесь на помощь приходит второй колонтитул! Второй нижний колонтитул нужен для расширения нижней границы окна под содержимым, чтобы туда поместился первый нижний колонтитул.
Для этого он должен иметь точно такие же стили, как первый (за исключением добавленных специально для него), и должен полностью дублировать содержимое первого футера.
Но нет необходимости показывать это пользователю.
Таким образом, задача выполнена .
Но недостатки метода очевидны: рост html-кода, плохое влияние на SEO, нужно особенно внимательно следить за тем, чтобы контент был одинаковым в обоих блоках.
Поэтому предлагаю еще одну модификацию: нужно дублировать футер не на сервере, а на клиенте с помощью javascript. Фундаментальное отличие от описанного выше метода javascript заключается в том, что этому методу требуется javascript только во время загрузки страницы.
Он не производит расчеты и не считает размеры.
К сожалению, в процессе подготовки финальной версии выяснилось, что ie6 не клонирует содержимое неизвестных ему тегов, поэтому $('footer').
clone() в нем не работает. Мне пришлось заменить тег на div. Теги: #footer #CSS #js #CSS
-
Теплообменник
19 Oct, 24 -
Мандельштам Леонид Исаакович.
19 Oct, 24 -
Беспроводные Системы Juniper — Первый Взгляд
19 Oct, 24 -
Системное Администрирование. Начинать
19 Oct, 24 -
Мишень Как Антидепрессант
19 Oct, 24 -
Наизнанку
19 Oct, 24
