Как сделать футер внизу страницы css

Как закрепить футер или подвал внизу web-страницы CSS?

Вы скорее всего уже не раз видели, что футер страницы был закреплён внизу, независимо от объёма контента. Сделаем это средствами CSS!

Как закрепить футер (footer) или подвал внизу web-страницы?

1. Начнём со стилей — файл style.css

2. Код HTML
Тут вся разметка и lorem ipsum (шаблонный текст).

3. Оба файла должны быть в одной директории.
Теперь меняем размеры окна браузера и смотрим за тем, как футер закреплён внизу.

Закрепить футер внизу страницы html/css

Если страница имеет мало контента, то часто возникает проблема, когда футер не закреплен внизу, а находится где-то посередине страницы. Выглядит это следующим образом:

HTML

CSS

Результат:

Для того, чтобы закрепить футер страницы внизу воспользуемся относительными единицами измерения — vh. С их помощью можно задать блоку высоту, равную высоте окна браузера. Для этого зададим блоку .content свойство min-height: calc(100vh — 130px) , где 100vh — полная высота окна браузера, 130px — высота шапки и футера (узнать можно с помощью режима разработчика в браузере. Для Chrome — f12). В итоге для блоку .content буде присвоена минимальная высота, равная разности высоты окна браузера и суммы высот шапки и футера.

Как прижать футер кроссбраузерно к низу страницы (руководство к действию)

Раньше эта статья находилась по адресу ниже, но в ноябре 2016 года этот сайт сдох по неизвестной причине… Но к счастью Хомс сохранил этот текст)
http://webdevelopernotes.ru/2010/09/26/kak-prizhat-footer-k-nizu-stranitsy/
26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Как прижать футер к низу страницы (руководство к действию)
Блог верстальщика » Как прижать футер к низу страницы (руководство к действию)
Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта:

Первое и главное условие, позволяющее прибить футер, он же подвал сайта к низу страницы — использование правильного доктайпа (смотрим заметку о доктайпе). Если вы хотите обойтись без него, мы с вами друг друга не поймём, а рецепт вам не поможет.

Второе: подвал страницы является отдельным блоком. Никаких лишних обёрток между футером и боди быть не должно. Возможные варианты размётки:

Третье условие: высота футера будет фиксированной. То есть, не рассчитанной на добавление неограниченного количества контента. Впрочем, я не знаю дизайнов, предполагающих свободное наполнение футера чем попало.

Задача первая: обнуляем все лишние поля и отступы:

* <
margin:0;
padding:0;
border-collapse:collapse;
>
Если это противоречит вашим принципам, достаточно обнулить вертикальные поля и отступы для html и body.

Задача вторая: прижать к низу футер нам позволит абсолютное позиционирование. Однако абсолютно позиционированный элемент всегда позиционируется относительно своего контейнера, которым является (внимание!) ближайший предок, у которого свойство position отлично от static. Если такого предка нет, элемент позиционируется относительно окна, создавая неопытным верстальщикам проблему в виде прилипания поперёк страницы. Чтобы футер признал body своим контейнером и прилип к низу страницы, а не окна, делаем боди относительно позиционированным:

body <
position:relative;
>
Теперь надо задать высоту body таким образом, чтобы при малом количестве содержания body вытягивался по высоте окна, а при большом свободно растягивался за его пределы. Сначала задаём высоту корневому элементу:

html <
height:100%;
>
Без прямого указания высоты элемента html невозможно управлять высотой его дочернего элемента body. Теперь высота html определяется высотой окна браузера. Далее задаём минимальную высоту body:

body <
min-height:100%;
>
Получаем то, что хотели: мало содержания — body тянется по окну, много содержания — растягивается свободно докуда надо. Тем, кто поддерживает IE6, придётся отдельно указать height:100%; только для него одного — в общий файл стилей это определение попасть не должно: body станет обрезаться по высоте окна.

Теперь, когда контейнер (дом родной) готов, можно заняться самим футером. Его позиционируем и прижимаем к нижней и к левой границам:

#footer <
position:absolute;
bottom:0;
left:0;
>
Поскольку абсолютно позиционированные элементы по умолчанию имеют ширину по содержанию, назначаем ширину во всё окно (а высоту какую нам надо):

#footer <
width:100%;
height:50px;
>
Боковых padding у футера быть не должно — они добавятся к стопроцентной ширине и подвал вылезет за пределы экрана. Отступы надо будет задать дочерним элементам футера.

Чтобы подвал впоследствии не перекрылся бекграундом основной области, зададим подвалу z-индекс побольше (гарантируем, что он всегда будет лежать «выше» и «ближе» к зрителю, чем прочие элементы страницы):

#footer <
z-index:500;
>
И для борьбы со случайными глюками в IE7, а также против распяливания подвала лишним содержанием добавим правило:

#footer <
overflow:hidden;
>
Подвал прижат. Осталось «оттолкнуть» от него содержание основной области. Зададим ей нижний отступ немного больше высоты подвала:

div#wrapper <
padding-bottom:70px;
>
Если основная область размечена трёхячеечной таблицей, то отступ надо задать всем трём ячейкам:

td#left, td#content, td#right <
padding-bottom:70px;
>
Всё! Схема работает — футер всегда внизу страницы, и никаких излишков, вылезающих за пределы окна при малом содержании. Применено в этом блоге и на многом множестве свёрстанных мной сайтов.

&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;приписка от автора ftask&#8212;&#8212;&#8212;&#8212;
для мобил можно ограничтить ширину вставив head метаданные

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *