Прижать футер к низу страницы css flex

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 54a30efd4e5ad721 • Your IP : 91.146.8.87 • Performance & security by Cloudflare

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

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

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

Разберем наш способ

Чтобы предотвратить эту ошибку, мы будем создавать нашу страницу, используя flexbox — самый продвинутый инструмент, который CSS3 может предложить для построения адаптивных макетов.

Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.

Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.

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

• flex-grow — определяет, сколько свободного места в контейнере переходит к элементу;
• flex-shrink — определяет, насколько будет сокращаться элемент, когда для всего не будет достаточно места;
• flex-basis — размер для элемента, установленный по умолчанию.

Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:

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

Подводим итоги и делаем выводы

Таким образом, flexbox можно считать отличным союзником при построении макетов с нуля. Все основные браузеры поддерживают его с несколькими незначительными исключениями, поэтому его довольно безопасно использовать во всех проектах IE9+. На сайте вы можете найти ещё один способ, но уже используя только CSS – «Как прижать футер к низу страницы».

Надеемся, наш метод создания закрепленных футеров был вам полезен, вы узнали что-то новое и вам понравилась эта статья. Оставьте нам комментарий, если знаете отличный способ использования flexbox!

Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.

Простейшая html разметка:

Способ #1

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

Способ #2

Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Способ #3

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

Способ #4

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

Способ #5

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

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )