Как прижать footer к низу окна браузера с помощью CSS.
Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.
В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).
Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:
Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.
Как избежать этой ситуации? Как прижать footer к низу окна браузера?
В этой заметке хочу поделиться своим опытом в решении этого вопроса.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.
Итак, имеем следующий HTML-код:
Заголовок страницы Содержимое headerЗаголовок.
Пример текста документа
Место copyright.
Теперь посмотрите на код CSS, который позволит решить проблему и прижать footer к низу окна браузера.
* < margin:0; >body height: 100%; min-width:900px; > html < position:relative; min-height:100%; >#container < padding-bottom: 100px;/*Примерно 2 размера footer, чтобы он не наезжал на контент при узком окне браузера*/ >#footer
В общем, теперь страница выглядит вот так:
Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.
Для элемента body обязательно нужно задать высоту 100%.
Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы
position: absolute; bottom: 0;
он встанет как раз в то место, где заканчивается 100% высоты элемента body.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как привязать футер к низу страницы css
Существует несколько способов, позволяющих решить данную проблему. Рассмотрим некоторые из них.
Исходный HTML файл:
class="wrapper"> class="content">i am content class="footer">I am footer
Пример №1. Footer документа прижимается к низу с помощью фиксированного позиционирования.
.footer position: fixed; left: 0; bottom: 0; /* Добавим цвет и ширину блока для наглядности*/ background-color: #444; width: 100%; > Пример №2. C помощью Flex. Обратите внимание что классу обертке необходимо будет задать высоту.
.wrapper display: flex; flex-direction: column; justify-content: space-between; height: 100vh; > Пример №3. С помощью Grid. У обертки так же задается высота.
.wrapper height: 100vh; display: grid; grid-template-rows: 1fr auto ; > 2 способа прижать футер к нижней части страницы (подходит для IE10 & Edge)
Весь этот код просто для примера, важно, понять логику, чтобы для своей разметки без проблем добавить пару правил и можно было прижать футер к нижней части страницы.
Способ первый — не очень правильный, но часто используемый.
Футер спозиционирован абсолютно и прижат книзу. А для родительского блока задан снизу отступ, равный высоте футера. И поскольку для разных размеров экрана высота футера может быть разно, то высоту футера высчитываем скриптом.
CSS для абсолютного позиционирования футера внизу:
.body < position: relative; min-height: 100vh; box-sizing: border-box; >.footer
Скрипт для вычисления высоты футера и добавления такого же отступа внизу родительского контейнера:
(function addPaddingForFooter() < var $footerHeight = $('.footer').outerHeight(); $('.body').css(< 'padding-bottom': $footerHeight >); >)();
Пример реализации с абсолютным позиционированием футера:
Способ второй — правильный, с использованием flex.
Для родительского блока задаем display: flex; направление размещения блоков — column , и здесь есть 2 варианта:
а) для блока .content , который идет перед .footer задаем flex-shrink: 0 , для того, чтобы этот блок не сжимался, если высота содержимого страницы будет больше 100vh, а для .footer задаем margin-top: auto;
.body < position: relative; height: 100vh; display: flex; flex-direction: column; >.content < flex-shrink: 0; >.footer
б) для блока .content , который идет перед .footer задаем flex-grow: 1 и flex-shrink: 0 , для того, чтобы этот блок занимал все свободное место и при этом не сжимался., а для футера ничего прописывать не нужно.
.body < position: relative; height: 100vh; display: flex; flex-direction: column; >.content
Пример реализации с использованием flex :
Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…
Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…
Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера. Если использовать просто fadeIn(),…
Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить…
Прижать футер к низу окна браузера
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS.
UTM метки – это дополнительные данные, которые добавляются в URL с помощью GET-параметров при клике на баннер в.