Блок внизу страницы css. Прижать футер к низу страницы

Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантирует вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!

Влад Мержевич

, вложив их внутрь контейнеров content и footer , а также включить еще один стиль специально для этого браузера (пример 2).

Пример 2. Код с учетом IE6

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

В данном примере используется значение absolute свойства position . При абсолютном позиционировании элемент можно поместить в любое место окна браузера, но при этом он прокручивается вместе с содержимым. В этом основное различие между значениями fixed и absolute . Чтобы подвал не перемещался, задается высота страницы как 100% и отсекается все, что не помещается в текущие размеры окна. При этом пропадает вертикальная полоса прокрутки, ее следует добавить к content с помощью overflow .

Еще один неприятный момент это наложение фона подвала на полосу прокрутки, так что придется задать отступ справа на ширину скролбара. При этом, если полосы прокрутки нет, в подвале справа будет зиять дыра.

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

Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.

В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS .

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.

Первый способ

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html , body и.wrapper) на 100%. При этом контентному блоку.content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; } .content { padding-bottom: 90px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

* { margin: 0; padding: 0; } html, body, .wrapper { height: 100%; } .content { box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } .footer { height: 80px; margin-top: -80px; }

Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом.content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { display: table; height: 100%; } .content { display: table-row; height: 100%; }

Здесь мы эмулируем поведение таблицы, превратив блок.wrapper в таблицу, а блок.content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку.content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

* { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); }

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Всем привет!

Сайт выглядит эстетично, если все его элементы находятся на своих местах. Однако часто бывают случаи, когда все вроде бы нормально, но что-то все-таки не так... Например, если страница короткая, футер не прижат к низу страницы, а находится там, где ему и положено — после основного блока сайта. Это смотрится не очень красиво.

Поэтому сегодня мы поговорим с вами о том, как прижать подвал сайта к нижней границе окна браузера.

Итак, к подвалу мы выставим следующие требования:

• подвал прижат к низу экрана при высоте окна браузера больше высоты страницы не зависимо от контента;
• футер находится на положенном ему месте при объеме контента больше, чем высота окна браузера;
• работает в во всех популярных браузерах;
• надежность - не зависит от сложности верстки.

Для примера возьмем простую страницу, состоящую из двух основных блоков: основного (main) и подвала (footer). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:

Шаг 1

Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (min-height), подвалу жестко указываем высоту (height).

При этом общая высота сайта составит высота экрана + высота подвала.

Шаг 2

Отрицательным отступом (margin-top) «въезжаем» в основной блок, чтобы высота сайта составляла только 100% высоты экрана.

При таком расположении блоков и при достаточном количестве контента (например, текста) в основном блоке, возможны накладки контента в основном блоке на подвал:

Шаг 3

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

Теперь, если контента будет много, он будет двигать пустой блок вниз. А это будет опускать и подвал, не давая налезть на него контенту.

Смотрим как это выглядит в коде:

<html > <head > <title > Футер прижат к низу</ title > <style type = "text/css" > * {margin: 0; padding: 0;} /* обнуляем отступы */ body { background: #fff;} html,body { height: 100%; /* задаем высоту тела документа */} .main { /* основной блок, который должен растянуться до подвала */ background: #999; /* цвет фона основного блока (для наглядности) */ min-height: 100%; /* задаем минимальную высоту основного блока */} * html .main { /* хак для ie6 */ height: 100%; /* для ие6, т.к. не понимает min-height */} .hFooter { /* это распорка в основном блоке - резервируем место для подвала */ height: 40px; /* высота нашего подвала */} .footer { /* подвал */ background: #0000CC; /* цвет фона подвала (для наглядности) */ color: #fff; height: 40px; /* высота подвала */ margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */} </ style > </ head > <body > <div class = "main" > Это основной блок <div class = "hFooter" > </ div > <div class = "footer" > Это подвал</ div > </ body > </ html >

Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для.hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:

.hFooter { clear : both ; height : 40px ; }

Если Вы уже немного освоили , тогда может возникнуть вопрос: «Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?».

Ответ - так просто его тут использовать нельзя, так как размер блока равен его размерам + ширина внутренних отступов + ширина границ. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами экрана.

Недостаток данного приема — это использование дополнительного пустого элемента hFooter. В реальных условиях (когда содержимое сайта не пустое и применяется блочная верстка) этого можно избежать применив - этот прием поможет очистить поток без использования дополнительного элемента, а чтобы контент не налез на футер, пропишем в колонках padding-bottom.

Проблемы с z-слоями

В вышеописанном приеме футер поднимали отрицательным отступом вверх. При этом возникает потенциальная проблема с z-слоями. Например, нам нужно показать всплывающее окно (пускай это будет div), которое будет позиционироваться относительно контейнера main.

<div class = "main" > [...] <div class = "popup" > [...] </ div > </ div > <div class = "footer" > [...] </ div >

.main { position : relative ; z-index : 1 ; /* z-index меньше чем у футера, чтобы тот был виден */ } .popup { position : absolute ; z-index : 100 ; [ ...] } .footer { height : 50px ; margin-top : -50px ; position : relative ; /* чтобы можно было задать z-index */ z-index : 2 ; /* больше, чем у main чтобы быть видимым */ }

Все хорошо до тех пор пока у нас не пересекаются всплывающее окно и подвал (а такая ситуация довольно часто возникает) - вот тут начинаются проблемы. Не смотря на то, что у всплывающего окна наибольший z-index, оно будет перекрываться футером, т.к. родитель popup имеет z-index меньший, чем у подвала:

В этом случае нужно искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен внутри main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.

Решение 2 - абсолютное позиционирование

Идея похожа на решение 1:

• Растягиваем основной блок на всю высоту экрана;
• Резервируем место для подвала;
• Относительно основного блока позиционируем подвал в самый низ абсолютным позиционированием.

HTML: relative ; /* чтобы дочерние элементы позиционировались относительно этого блока */ } .footer { height : 50px ; position : absolute ; left : 0 ; bottom : 0 ; width : 100% ; } * html .footer { bottomy: expression(parentNode.offsetHeight % 2 ? style.bottom= "-1px" : style.bottom= "0px" ) ; /* хак для ие6, у которого есть косяк со смещением на 1px */ }

Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.

Недостаток обоих методов — оба метода годятся только для фиксированного по высоте подвала.

На сегодня все. Теперь Вы знаете, как прижать футер к низу экрана разными способами и какие при этом могут возникнуть проблемы.

Подписываемся на обновления и ждем новых интересных публикаций. Пока.