Как прижать футер к низу страницы?
Я думаю, при верстке, мало кто не столкнулся с проблемой «непослушного футера». Если контента много, то выглядит все прилично, но стоит оставить страницу без наполнения — как футер зависает по центру страницы. Бывало?
Решение проблемы.
- Отделяем футер от всего остального содержимого, помещая его за пределы обрамляющего блока wrapper.
- В файле стилей задаем высоту height у тегов html и body — 100%. Таким образом, растягиваем html и body на высоту экрана.
- Обрамляющему блоку wrapper задаем следующие параметры:
- min-height: 100%; — указываем минимальную высоту блока wrapper (Старые версии IE не понимают min-height).
- height: auto !important; — указываем на случай если контент будет занимать больше места, чем указанная высота. Таким образом, блок будет тянуться на высоту, занимаемую контентом.
- height: 100%; — задаем для старых версий браузеров IE.
- У тега content задаем нижний padding — 100px; Делается это для того, чтобы на это место поместить footer. Зачем — читаем ниже.
- Сейчас мы получили высоту страницы равную 100% + 100px. Лишние 100px убираем следующим образом: у тега footer задаем отрицательный верхний отступ, равный высоте футера (height: 100px;) margin-top: -100px; Свойство position: relative; С помощью отрицательного верхнего отступа мы полностью перемещаем футер на область блока wrapper, который занимает 100% экрана.
Применяя такой способ, футер будет всегда прижат к низу страницы.
Заменив теги html5 на обычные div, применяя к ним теже свойства работает и в старых версиях, даже в IE6.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; } #content { padding: 0 0 100px; height:400px; } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; } |
Загрузка...
ой-ой-ой ничего не понятно
долго тупила на картинки и текст, а потом оказалось что код в самом низу, уж прижали книзу, так прижали
Надеюсь разобрались? =)
Спасибо большое, все работает.
А как быть если высота футера переменная и зависит от контента?
JS конечно поможет. А как без него решить?
Большинство динамичных элементов требуют использования Javascript, так же и в вашем варианте. На крайний случай можно задать минимальные значения отступов у #content и высоты футера. При увеличении высоты футера, он просто вылезет за пределы #wrapper, но виден будет.
да нечего там думать — самую большую страницу измерь да пропиши фиксированную высоту контейнера, а то при просмотре на огромном мониторе все равно пляшет 100%!
Это не универсально. Самая большая страница может быть 2-3 экрана в высоту (каталог товаров, подборка фотографий), а страница, например, о компании — пару абзацев, и прокрутка пустой страницы на эти 2-3 экрана вниз — смотрится не профессионально.
Этот способ «прижатия» футера к низу отлично работает и от монитора не зависит.
Такая верстка это какая «херь» Вы уж простите, не проще ли объявить футер как абсолютно позиционированный блок, дать ему z-index свойство выше всех и пригвоздить его left=0 bottom=0 width=100% heigh=200px. Это к примеру.
С уважением
«возмущенный верстальщик»
По вашему способу как вы предлагаете выровнять футер по центру? left:0 — плохой вариант. Элементу, который позиционируется относительно relative — задаем margin:0 auto и не паримся.
Во-вторых, что делать если высота футера динамически изменяется? Нельзя задать высоту? Абсолютно позиционируемый элемент не отобразится.
Совет: стараться избегать абсолютного позиционирования, где это возможно — сэкономите в будущем много времени и нервов 😉