Как сверстать footer через flex
Перейти к содержимому

Как сверстать footer через flex

  • автор:

Как сверстать footer через flex

Как прижать подвал сайта к низу окна браузера

Как прижать подвал сайта (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 можно здесь.

Как сверстать такой футер с помощью флексов?

введите сюда описание изображения

Хотелось бы понять как решить такую казалось бы тривиальную задачу как верстка данного футера. Я так понял нужно разделить его на footer__top и footer__bottom, но как распределить нижнюю часть? Ведь justify-content тут точно не поможет, так как распределение тут не ровное.

Отслеживать

задан 19 июл 2021 в 10:51

105 4 4 бронзовых знака

Я дам вам такой совет. найти хорошую статью про flex и внимательно ее прочитать и разобраться во всех тонкостях. Ваша задача решается тривиально, если вы действительно знали бы все нюансы модуля flex (а именно базовый размер, flex-grow и flex-shrink).

Как правильно сверстать footer?

5eee74015e4f4101879064.jpeg5eee756d51e01689232528.jpeg

На первом скрине — то, что получилось у меня) А на втором как должно быть.
У меня правая часть футера к низу приклеелась, как это убрать?
Там справа должен быть блок с виджетами, как на втором скрине. Как такое реализовать?)

footer < height: 300px; >.footer-top < background-color: #053a6a; height: 262px; >.company, .abonents, .support, .tech-support < margin: 30px 0 82px 72px; float: left; >.company ul li, .abonents ul li, .support ul li, .tech-support ul li < margin-bottom: 7px; >.company h2, .abonents h2, .support h2 < padding-top: 30px; margin-bottom: 10px; margin-left: -20px; color: #ffffff; >.tech-support < width: 261px; >.tech-support h2 < padding-top: 30px; margin-bottom: 10px; color: #ffffff; >.company a, .abonents a, .support a, .tech-support a < text-decoration: none; color: #ffffff; >.tech-support ul li < text-decoration: none; list-style-type: none; color: #ffffff; >.tech-support ul a < text-decoration: none; >.footer-left < height: 100%; display: inline-block; background-color: #09579f; >.footer-right < display: inline-block; >.subscr < display: inline-block; >.footer-bottom p
  • Вопрос задан более трёх лет назад
  • 1848 просмотров

4 комментария

Простой 4 комментария

Очень мудрено сделано, намного более компактнее и правильнее будет сверстать с применением flex.

  1. У .footer убрать высоту
  2. Для .subscr убрать display: inline-block
  3. Для .footer-right:

.footer-right

FinGanapre

FinGanapre @FinGanapre

Телефоны не забудьте кликабельными сделать. Там у вас недописано немного. пиксели использовать не нужно, если это будет адаптив. Есть %, rem и em для этих целей. На float-ах сейчас уже не верстают. Страшного в этом ничего нет, можно использовать, но вам самим будет не очень удобно. Посмотрите в сторону flex-box. Избегайте вложенных селекторов, есть прекрасный БЭМ. Для цветов и других повторяющихся, зависимых от чего-то величин, поддающихся какой-то общей логике лучше использовать css переменные. Почитайте «css для профи». Это книга, не помню автора.

Ankhena

Ankhena @Ankhena Куратор тега Вёрстка

Waniman,
1. Обязательно проверяйте свой код валидатором https://validator.w3.org/nu/
Нарушать можно, только если вы очень хорошо понимаете что именно и зачем делаете.

Дочерними элементами теги ul могут быть только li.
А ссылки уже внутри li.

2. Верстка флоатами уже давно не используется.
В современном мире флоаты используются исключительно по назначению.

А для верстки используют flex и grid.

В вашем случае достаточно flex’а, но и grid пойдет.

Обязательно обратите внимание на свойства flex-grow и flex-shrink.

3. Для фона обертки футера, если он растягивается на всю ширину окна, а контентный блок имеет фиксированную
или процентную ширину можно использовать такой прием с градиентом https://jsfiddle.net/k10h26nc/

. пиксели использовать не нужно, если это будет адаптив.

Пиксели можно использовать, даже если это адаптив.

FinGanapre

FinGanapre @FinGanapre

Можно, просто зачем? Удобнее прыгать от rem единиц в отступах. Пиксели только на max-width у меня остаются и в :root для font-size. В некоторых случаях в местах где нужен фиксированный размер либо изменяющийся только в медиа запросах.

Согласен, что в моей формулировке «не нужно» не хватает слова «почти». А «не нужно» лучше заменить на «нет необходимости» Так будет ближе к тому, что я имел в виду:)

Решения вопроса 0
Ответы на вопрос 1
Aleksander911 @Aleksander911
Возьми принцип бутстрапа и создай свой

  
текст
текст
текст
.container < width: 90%; max-width: 1200px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; >.row < display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; >.col-3

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +2 ещё

Как лучше оформить такую галерею?

  • 2 подписчика
  • 15 часов назад
  • 100 просмотров

Простая HTML сетка на Flexbox с прижатым к низу футером

Простая HTML сетка на Flexbox с прижатым к низу футером

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

HTML сетка на Flexbox

 
Основная контент
Наш футер

Стили с использованием Flexbox.

html < height: 100%; >body < display: flex; flex-direction: column; height: 100%; >.main < flex: 1 0 auto; >.footer

В блоке main ‘основной’ используйте все что вашей душе угодно и на что горазда ваша фантазия.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *