Как прижать футер к низу страницы (руководство к действию)
Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта:
html:
…………
css:
* < margin:0; padding:0; border-collapse:collapse; >html < height:100%; >body < position:relative; min-height:100%; >#wrapper < padding-bottom:70px; >#footer
Подробное изложение
Первое и главное условие, позволяющее прибить футер, он же подвал сайта к низу страницы — использование правильного доктайпа (смотрим заметку о доктайпе). Если вы хотите обойтись без него, мы с вами друг друга не поймём, а рецепт вам не поможет.
Второе: подвал страницы является отдельным блоком. Никаких лишних обёрток между футером и боди быть не должно. Возможные варианты размётки:
Третье условие: высота футера будет фиксированной. То есть, не рассчитанной на добавление неограниченного количества контента. Впрочем, я не знаю дизайнов, предполагающих свободное наполнение футера чем попало.
Задача первая: обнуляем все лишние поля и отступы:
Если это противоречит вашим принципам, достаточно обнулить вертикальные поля и отступы для html и body.
Задача вторая: прижать к низу футер нам позволит абсолютное позиционирование. Однако абсолютно позиционированный элемент всегда позиционируется относительно своего контейнера, которым является (внимание!) ближайший предок, у которого свойство position отлично от static. Если такого предка нет, элемент позиционируется относительно окна, создавая неопытным верстальщикам проблему в виде прилипания поперёк страницы. Чтобы футер признал body своим контейнером и прилип к низу страницы, а не окна, делаем боди относительно позиционированным:
body
Теперь надо задать высоту body таким образом, чтобы при малом количестве содержания body вытягивался по высоте окна, а при большом свободно растягивался за его пределы. Сначала задаём высоту корневому элементу:
html
Без прямого указания высоты элемента html невозможно управлять высотой его дочернего элемента body. Теперь высота html определяется высотой окна браузера. Далее задаём минимальную высоту body:
body
Получаем то, что хотели: мало содержания — body тянется по окну, много содержания — растягивается свободно докуда надо. Тем, кто поддерживает IE6, придётся отдельно указать height:100%; только для него одного — в общий файл стилей это определение попасть не должно: body станет обрезаться по высоте окна.
Теперь, когда контейнер (дом родной) готов, можно заняться самим футером. Его позиционируем и прижимаем к нижней и к левой границам:
#footer
Поскольку абсолютно позиционированные элементы по умолчанию имеют ширину по содержанию, назначаем ширину во всё окно (а высоту какую нам надо):
#footer
Боковых padding у футера быть не должно — они добавятся к стопроцентной ширине и подвал вылезет за пределы экрана. Отступы надо будет задать дочерним элементам футера.
Чтобы подвал впоследствии не перекрылся бекграундом основной области, зададим подвалу z-индекс побольше (гарантируем, что он всегда будет лежать «выше» и «ближе» к зрителю, чем прочие элементы страницы):
#footer
И для борьбы со случайными глюками в IE7, а также против распяливания подвала лишним содержанием добавим правило:
#footer
Подвал прижат. Осталось «оттолкнуть» от него содержание основной области. Зададим ей нижний отступ немного больше высоты подвала:
div#wrapper
Если основная область размечена трёхячеечной таблицей, то отступ надо задать всем трём ячейкам:
td#left, td#content, td#right
Всё! Схема работает — футер всегда внизу страницы, и никаких излишков, вылезающих за пределы окна при малом содержании. Применено в этом блоге и на многом множестве свёрстанных мной сайтов.
Понравилось? Самое время поделиться заметкой!
Как прижать футер к низу страницы
В этой статье я расскажу о том, как прижать подвал сайта к низу страницы так, чтобы при масштабировании он оставался на своём месте и никуда не прыгал. Это не особо сложная задача, но у новичка, который только начал изучать HTML и CSS могут возникнуть с этим трудности.
Для начала необходимо обозначить HTML-разметку страницы: создать три элемента div с и >
Все div-ы находятся, естественно, внутри элемента body, задаём необходимые стили, чтобы футор стал на свое место.
Все блочные элементы занимают всё доступное место по ширине, но для реализации прижатого футора необходимо, что бы они заняли его и по высоте. Для этого применяем к элементам html и body свойство height со значением 100%.
html, body
Далее убираем «ненужный» margin у body в 8px и немного стилизуем страницу.
body < margin: 0; background-color: #c0deed; color: #fff; >#main < width: 760px; background-color: gray; margin: 0 auto; >#footer
После того как html и body стали растянуты по вертикали, нам необходимо добавить ещё несколько основных свойств к элементу div с >
min-height: 100%; margin-bottom: -150px;Значение нижнего отступа должно равняться высоте футера. Чтобы контент, расположенный в элементе c не заезжал на футор задаём ему padding-bottom с тем же значением, что и у нижнего отступа.
Вот и всё страничка готова и footer прижат к низу.
Как прижать футер (footer) к низу страницы?
Посмотрим как прижать футер к низу страницы в браузере на CSS.
Например, у нас есть стандартное расположение:
- Header
- Main (Тело страницы)
- Footer
index.html
Прижать футер к низу страницы Header Main (Тело страницы) Здесь у нас есть общий div с классом wrapper, которому мы задаём параметр display: flex и расположение внутренним блокам вниз ( flex-direction: column ).
margin: 0 у нас всегда убирает лишние отступы у html и body. Им же мы и добавляем 100% ширины ( height: 100% ) и такую же ( min-height: 100% ) минимальную ширину wrapper.
Важным параметром здесь является flex: 1 1 auto , что по сути является короткой записью, но нам достаточно указать здесь только flex-grow: 1 , который и определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу. И всё заработает.
style.css
html, body < margin: 0; height: 100%; >.wrapper < min-height: 100%; display: flex; flex-direction: column; >.main
(1 оценок, среднее: 5,00 из 5)