Прижимаем футер к низу страницы
Часто у начинающих верстальщиков возникает вопрос: как прибить footer к нижней части окна. Этот вопрос актуален, если у вас страница по содержимому значительно меньше размера монитора. Я не буду рассматривать классические способы, их в интернете очень много. Коснусь нескольких способов, которые используют новейшие наработки в CSS и HTML.
Используя flexbox
Для начала, нам нужен элемент-обертка, который будет оборачивать все содержимое 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 .
Кнопка «Вверх» с плавной прокруткой позволяет пользователям быстро возвратиться к началу сайта, читайте наш рецепт
Как прижать футер к низу экрана?
У вас написано grid-template-rows: 1fr max-content;
А теперь посмотрите что у вас там с дочерними элементами в body и кто на самом деле должен растянуться на всё оставшееся место.
И высоту body задайте как min-height: 100vh для простоты.
И флоаты для сеток никто давно не использует
Решения вопроса 0
Ответы на вопрос 3
Алексей @eldenhard2
родитель < position: relative; height: 100vh; >Дочерний
Ответ написан 21 февр.
Нравится 1 5 комментариев
vittallyyaaa @vittallyyaaa Автор вопроса
Можно конкретнне, что значит родитель и дочерний?
Алексей @eldenhard2
vittallyyaaa Родитель — блок в который вложен дочерний элемент
Ankhena @Ankhena Куратор тега CSS
Алексей, какой еще абсолют для футера в 2023 году при наличии флексов и гридов?
Алексей @eldenhard2
Ankhena, в 2023 запретили их использовать?
Ankhena @Ankhena Куратор тега CSS
Алексей, если вы используете абсолют для футера, то получаете обычные минусы абсолюта и к этому ещё нужен скрипт, проверяющий высоту футера, чтобы сделать такой же паддинг, чтобы футер не налез на контент. Или хуже, накостылять фиксированной высотой.
Зачем рекомендовать весь этот бардак, при наличии флексов и гридов?
Разметка
Прежде всего убедитесь, что используете правильную разметку веб страницы, которая показана ниже.
Теперь давайте прижмем футер к низу — для этого понадобиться добавить кое-какие стили.
html < height: 100%; >body < display: flex; flex-direction: column; height: 100%; >header < flex: 0 0 auto; >main < flex: 1 0 auto; >footer
Здесь мы делаем все элементы внутри body — flex-элементами и располагаем их в колонку. Далее для main задаем свойство flex-grow равным единице (в сокращенном свойстве flex). Таким образом контент растягивается на все оставшееся пространство, а футер прижимается к низу.