Фиксированный подвал
Подвалом на жаргоне веб-разработчиков называется нижняя часть сайта, где пишутся авторские права, публикуются контакты, выводятся разные счетчики и тому подобная информация. Обычно подвал располагается после всего контента и виден только при прокрутке страницы. В некоторых случаях желательно сделать подвал доступным всегда, независимо от высоты страницы, и зафиксировать его внизу окна браузера.
Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).
Пример 1. Фиксированный подвал
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал
Результат примера показан на рис. 1.
Рис. 1. Подвал внизу страницы
Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами , вложив их внутрь контейнеров content и footer , а также включить еще один стиль специально для этого браузера (пример 2).
Пример 2. Код с учетом IE6
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
5 способов как прижать footer к низу страницы
Назначение футера заключается в том, что он «прилипает» к нижней части окна браузера. Если на странице достаточно контента, чтобы сдвинуть его, то так и будет. Но если содержимое на странице короткое, тогда футер будет висеть посередине экрана.
Мы покажем 5 способов как можно прижать футер к низу страницы на чистом css
1 Отрицательный margin для wrapper
Создадим два соседних блока wrapper и footer. Для wrapper зададим нижний минусовый отступ равен высоте футера.
body> div class="wrapper"> content div class="push">div> div> footer class="footer">footer> body>
html, body height: 100%; margin: 0; > .wrapper min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; > .footer, .push height: 50px; >
Для этого требуется дополнительный элемент внутри wraper (“push”), чтобы гарантировать, что отрицательный margin не подтянет footer и не закроет какой-либо контент.
2 Отрицательный margin для footer
Этот метод не требовал использования элемента push, но вместо этого требовался дополнительный элемент обтекания вокруг содержимого, к которому нужно применить соответствующий нижний отступ. Опять же, чтобы избежать отрицательного поля поднять нижний колонтитул над любым содержимым
body> div class="content"> div class="content-inside"> content div> div> footer class="footer">footer> body>
html, body height: 100%; margin: 0; > .content min-height: 100%; > .content-inside padding: 20px; padding-bottom: 50px; > .footer height: 50px; margin-top: -50px; >
3 Задать calc() для content
Один из способов не использовать лишние элементы — отрегулировать высоту wrapper с помощью calc (). Тогда не будет никакого перекрытия, просто два элемента сложены друг на друга на общую высоту 100%.
body> div class="content"> content div> footer class="footer">footer> body>
.content min-height: calc(100vh - 70px); > .footer height: 50px; >
Обратите внимание на 70px в calc () и фиксированную высоту футера 50px. Предположим, что последний элемент в content имеет margin-bottom в 20 пикселей. Именно это нижнее поле плюс высоту футера необходимо сложить вместе, чтобы вычесть из высоты области просмотра. И да, мы используем здесь относительные единицы, как еще один маленький трюк, чтобы избежать необходимости устанавливать 100% высоты тела, прежде чем вы сможете установить 100% высоты контента.
4 С помощью flexbox
Большая проблема с вышеупомянутыми тремя методами состоит в том, что они требуют футер фиксированной высоты. Фиксированные высоты, как правило, моветон в веб-дизайне. Содержание может измениться. Вещи гибки. Фиксированные высоты обычно являются территорией красного флага. Использование flexbox для футера колонтитула не только не требует дополнительных элементов, но и позволяет использовать футер переменной высоты.
body> div class="content"> content div> footer class="footer">footer> body>
html, body height: 100%; > body display: flex; flex-direction: column; > .content flex: 1 0 auto; > .footer flex-shrink: 0; >
Вы можете даже добавить заголовок выше или ниже.
5 С помощью Grid
Разметка с помощью сетки еще новее (и менее широко поддерживается), чем flexbox. Вы также можете довольно легко использовать его для прилипания футера к низу страницы.
body> div class="content"> content div> footer class="footer">footer> body>
html height: 100%; > body min-height: 100%; display: grid; grid-template-rows: 1fr auto; > .footer grid-row-start: 2; grid-row-end: 3; >
Но минус grid то что не все браузеры его нормально поддерживают
Эта должно работать в последних версиях Chrome или Firefox и, вероятно, в более новой версии Edge.
Прижимаем футер к низу страницы
Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.
Простейшая html разметка:
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
Способ #2
Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
* < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer
Способ #3
Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content
Способ #4
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
* < margin: 0; padding: 0; >.content
Способ #5
Пожалуй, это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; height: 100%; >.content < flex: 1 0 auto; >.footer
Способ #6
Здесь целая библиотека на разные случаи (используется Flexbox )
Как прижать footer к низу страницы
Казалось бы такое простое действие, а выполняется через раз. Многие разработчики забивают на это, а некоторые просто не знаю как прижать footer к низу страницы. В этой статье мы поделимся самым простым и быстрым способом сделать это.
Для решения нашей задачи, мы воспользуемся технологией flexbox. Всё, что вам необходимо сделать — это разделить ваш код на две части. В первую часть нашего кода мы поместим footer , а во вторую часть — весь остальной контент.
Почему так? Давайте разбираться!
Допустим, у вас уже имеется такой код:
Document Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Первым делом, нам необходимо классы header и content завернуть в один общий класс, у нас это будет класс top . Следующие действие, класс footer и класс top мы заворачиваем в еще один класс, у нас это будет класс wrapper .
В итоге имеем такой результат:
Document Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Далее, к нам на помощь уже приходит сама технология flexbox, с её помощью мы и будем стилизовать наши созданные классы .top и .wrapper .
.wrapper < display: flex; flex-direction: column; min-height: 100vh; >.top
Объяснение написанному:
display: flex; — включаем технологию flexbox.
flex-direction: column; — расположить элементы колоннами.
min-height: 100vh; — минимальная высота элемента.
flex-grow: 1; — занять всё доступное пространство.
Готово! Теперь вы знаете как прижать footer к низу вашей страницы. Очень легко, не так ли? Быстро и красиво. Жаль, что очень многие разработчики совсем забывают про это. Также, хотелось бы напомнить, что это не единственный способ прижатия footer к низу страницы, есть и другие способы.
У многих из вас, может возникнуть вопрос, зачем создавался отдельный класс wrapper , почему мы просто не задали эти параметры для body . Сделать это конечно же можно, никто вам не запрещает, но это считается дурным тоном.
Старайтесь не совершать никаких манипуляций с тегом body , уж лучше создать на один класс больше, от этого ваш шаблон не станет хуже.
На этом у на всё, надеемся, что было полезно для вас. У нас недавно вышла статья про языки программирования, рекомендуем к прочтению, если вам интересна эта сфера, статья может быть очень полезной для вас.