В тег body (при использовании ASP.NET в тег form) помещаются блоки с классами wrapper и footer . В самом конце содержимого тега с классом wrapper вставляется пустой блок с классом push — он служит для создания пустого пространства между этими блоками, когда содержимое wrapper полностью помещается в область экрана.
rel="stylesheet" type="text/css" href="layout.css" /> class="wrapper"> Your website content here. class="push">Для всех родительских блоков тега с классом wrapper должна быть установлена высота 100% и убраны отступы (margin):
// данный селектор можно заменить на конкретные теги (html, body и т.д.), если его свойства нарушают отображение других элементов margin: 0; > html, body height: 100%; > .wrapper min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; // значение обратное высоте footer > .footer, .push height: 4em; // высота footer > При использовании колонок внутри блока с классом wrapper необходимо добавить clear для класса push :
.footer, .push clear: both; > Если используется ASP.NET, следует добавите следующий CSS-код:
form height: 100%; > 
Часто у начинающих верстальщиков возникает вопрос: как прибить footer к нижней части окна. Этот вопрос актуален, если у вас страница по содержимому значительно меньше размера монитора. Я не буду рассматривать классические способы, их в интернете очень много. Коснусь нескольких способов, которые используют новейшие наработки в CSS и HTML.
Для начала, нам нужен элемент-обертка, который будет оборачивать все содержимое html страницы. Пусть это будет блок .wrap .
Расположим внутри него footer .
Зададим следующие стили CSS для созданных элементов:
Как видите, все довольно просто! Единственный минус — свойство flexbox не будет поддерживаться на старых браузерах.
height : 100% ;
background : pink ;
display : flex ;
flex-direction : column ;
height : 100% ;
flex-grow : 1 ;
flex-shrink : 0 ;
flex-basis : auto ;
height : 40px ;
background : cadetblue ;
flex-grow : 0 ;
flex-shrink : 0 ;
flex-basis : auto ;
Пример на codepen:
Если вы знаете фиксированную высоту футера — то можно прибегнуть к возможностям CSS3 и провести вычисления. Допустим, если высота футера — 100px, то нам нужно сделать минимальную высоту блока с содержимым:
min-height : calc ( 100vh — 100px ) ;
100vh — это высота размера окна. Единицы измерения vh (viewport height) — это относительные единицы измерения введенные в CSS3, измеряются относительно окна браузера. Также есть vw — viewport width.
Минусы данного подхода — высота футера фиксирована. Это значит — при мобильной версии сайта могут быть проблемы. Но в мобильной версии мы можем отключить вычисления с помощью @media .
Кнопка «Вверх» с плавной прокруткой позволяет пользователям быстро возвратиться к началу сайта, читайте наш рецепт
Иногда веб разработчикам сайтов требуется сделать так чтобы футер находился постоянно внизу страницы, т.е. прижимался к низу окна браузера. В данной статье мы покажем несколько вариантов решения. Пример HTML кода для нашей задачи:
Футер прижимается вниз за счет вытягивания блока контента и его родительских блоков на всю высоту height: 100% окна браузера и подъема футера вверх через отрицательный отступ margin-top: -100px для того чтобы не появлялся вертикальный скролл. В данном примере обязательно нужно указывать высоту подвала, которая должна быть равна значению отступа.
CSS код 1-го варианта:
Footer прижимается по абсолютному позиционированию от высоты родительских блоков (html, body и .wrapper), которая определена как 100%. При этом блоку .content следует определить нижний отступ, который должен быть равен или больше высоты подвала, иначе последний блок закроет часть контента.
CSS код 2-го варианта:
Указав блоку .wrapper свойство таблицы, а блоку .content свойство строки таблицы (display: table и display: table-row) и когда блоку .content и всем его родительским элементам задана высота 100%, контент растянется на всю высоту экрана, за минусом высоты футера, которая определяется внутренним контентом.
CSS код 3-го варианта:
100vh — высота окна браузера, а 100px — это высота футера. Функция calc() вычитает вторую величину из первой, в итоге футер прижимается к низу.
CSS код 4-го варианта:
Работает только в современных браузерах которые поддерживают это свойство
CSS код 5-го варианта:
Как прижать подвал сайта (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
Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.
* < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer
Благодаря свойству 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
Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
В результате footer прижат к низу.
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.
* < margin: 0; padding: 0; >.content
>100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.
Это лучший способ из всех представленных, однако работает он только в современных браузерах, котортые поддерживают CSS свойство flex. Как и в третьем способе, высота футера значения не имеет.
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; height: 100%; >.content < flex: 1 0 auto; >.footer
Узнать про поддержку браузерами свойства flex можно здесь.