Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (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). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:
Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (), подвалу жестко указываем высоту ().
При этом общая высота сайта составит высота экрана + высота подвала.
Заметка : при использовании блочной верстки и плавающих основных блоков (колонок) для.hFooter следует добавить : both, чтобы подвал расположился под колонками.:
HFooter { clear: both; height: 40px; }
Проверено в:
Заметка 1: Если ты уже немного освоил CSS, тогда может возникнуть вопрос: " Зачем использовать дополнительный элемент, если можно воспользоваться ?". Ответ — так просто его тут использовать нельзя, т.к. размер блока равен его ширине и высоте + сумме внутренних отступов + сумме толщин бордюров. Связка : 100% и даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами "первого экрана". Как это можно обойти смотри ниже.
Заметка 2. В Opera версии 9.5 и выше при добавлении doctype этот пример не сработает. Варианты обхода: