Как правильно прижать плавающий футер к низу страницы
Это кошмар какой-то! Почему подвал вашего сайта опять « всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.
Делаем правильный футер для своего сайта
Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает « кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно ( кружок «очумелые ручки» ) или начинающими веб-мастерами.
При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит « своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно « спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.
Для устранения этого « дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:
Первый способ
Первый способ « привязать » подвал « к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:
html < height: 100%; >header, nav, section, article, aside, footer < display: block; >body < height: 100%; >#wrapper < width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; >#header < height: 150px; background-color: rgb(0,255,255); >#content < padding: 100px; height:400px; background-color: rgb(51,255,102); >#footer
Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера ( слоя wrapper ). Растягиваем всю страницу и содержимое « тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:
html < height: 100%; >body
Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:
#wrapper
Строчка кода « height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .
Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:
#content
На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые « нейтрализуются » отрицательным значением отступа для футера ( margin: -100px ) при установленном для него относительном позиционировании ( position: relative ). Таким образом, с помощью отрицательного значения отступа мы « сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.
В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные :
Рассмотренный выше способ того, как сделать футер внизу страницы « незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.
Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.
Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке « наслоения ».
Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна ( wrapper ) значение этого свойства все равно меньше.
Вот более совершенный вариант:
CSS — код примера:
html, body < height: 100%; >.header < height:120px; background-color: rgb(0,255,102); >.main < min-height:100%; position: relative; background-color: rgb(100,255,255); >.footer
Как видно из кода, подвал мы поместили в состав основного элемента. Контейнеру мы задали относительное позиционирование, а для футера – абсолютное. Подвал мы закрепили в самом низу контейнера, установив его положение слева и сверху в 0.
Вариант для подвала с нефиксированной высотой
Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?
Для этого потребуется более совершенный вариант для нефиксированного подвала. В нем футеру задается значение table-row для свойства display . Благодаря этому он будет отображаться как строка таблицы:
Это абзац, расположенный в подвале сайта. Футер нефиксированный, поэтому его размер может подстраиваться под размер содержимого:
html,body < height:100%; margin:0; padding:0; background:#d33; >#wrapper < display: table; height:100%; >#header < height:100px; background: rgb(0,255,102); >#footer < background:#769; display: table-row; height:20%; >#wrapper, #footer < width:100%; >#content
Футер сайта надежно прижат к низу страницу. Теперь он уж точно не всплывет, и « не поломает » весь дизайн ресурса. И все потому, что для фиксации подвала мы использовали не кирпичи, а возможности HTML и CSS .
Как закрепить footer внизу страницы? [дубликат]
Как прижать footer внизу страницы вне зависимости высоты контента. Пример:
Отслеживать
user192664
задан 4 июл 2018 в 13:02
newProgrammer newProgrammer
887 10 10 серебряных знаков 26 26 бронзовых знаков
4 июл 2018 в 13:04
нельзя ли без px это калечить фигуру footer`a
4 июл 2018 в 13:09
Там больше про flex-grow для контентной области
4 июл 2018 в 13:12
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Через отрицательный margin на css :
$("#add").on("click", function() < $("Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel pariatur quod architecto quasi tempora exercitationem rerum delectus, consequuntur totam saepe laboriosam deserunt quam necessitatibus adipisci libero vitae tempore mollitia sunt, minus beatae? Ex consequuntur fugit, quis vel doloribus sequi minima dolores voluptatem ullam, quod beatae qui dolor facere explicabo perspiciatis.
").insertBefore(".push"); >);html, body < height: 100%; margin: 0; >.content < padding: 20px; min-height: 100%; margin: 0 auto -50px; >.footer, .push < height: 50px; >* < box-sizing: border-box; >body < font: 16px Sans-Serif; >h1 < margin: 0 0 20px 0; >p < margin: 20px 0 0 0; >footer
Плавающий footer
Основной контент оборачиваешь в div.content .
Flexbox :
Рекомендовал бы именно это решение
$("#add").on("click", function() < $("Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel pariatur quod architecto quasi tempora exercitationem rerum delectus, consequuntur totam saepe laboriosam deserunt quam necessitatibus adipisci libero vitae tempore mollitia sunt, minus beatae? Ex consequuntur fugit, quis vel doloribus sequi minima dolores voluptatem ullam, quod beatae qui dolor facere explicabo perspiciatis.
").appendTo(".content"); >);html < height: 100%; >body < display: flex; flex-direction: column; height: 100vh; >.content < flex: 1 0 auto; padding: 20px; >.footer < flex-shrink: 0; padding: 20px; >* < box-sizing: border-box; >body < margin: 0; font: 16px Sans-Serif; >h1 < margin: 0 0 20px 0; >p < margin: 0 0 20px 0; >footer
Плавающий футер на Flexbox
Как привязать футер к низу страницы
Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.
Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:
После того как структура страницы готова, приступаем к настройке css.
Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.
Прижать футер к низу экрана css код:
html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.main < padding-bottom: 80px; >.footer
Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.
В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.
Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.
Читайте также:
- Отцентровать popup с помощью css
- Как привязать футер к низу страницы
- Настройка PhpStorm pug (jade) и less Watchers
- Текст в одну строку и троеточие в конце CSS
- Height 100vh for mobile browsers iPhone and Android
Прижать footer к низу
Подсобите пожалуйста с версткой начального макета на Bootstrap 4. Я не очень хороший верстальщик( Вот что я сделал:
body < background-color: yellow !important; >header < background-color: red; >main < background-color: green; >footer
HEADER CONTENT Вот видите что произошло? Футер ушел влево. 🙁 Оно и понятно — position: absolute , но как по другому его прижать я не знаю. Можно задать сейчас width: 100% , но тогда он будет на всю ширину, а я хочу чтобы он был как и остальные блоки с отступами от краев. И еще мне не нравится то что блок main прилип к хедеру. Я хочу чтобы он разъезжался до футера даже без контента. P.S. Может правильнее поставить класс container тегу body , а не всем по отдельности?
Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 22 мар 2020 в 5:06
1,746 16 16 серебряных знаков 39 39 бронзовых знаков
так стартовый макет bs не такой ..
22 мар 2020 в 5:28
@MaximLensky в смысле?
22 мар 2020 в 5:29
в смысле вот такой макет: getbootstrap.com/docs/4.4/getting-started/introduction
22 мар 2020 в 5:30
очевидно вы плохо знаете bs. каждый css class в bs дубликат flexbox или css grid
22 мар 2020 в 5:46
да блин — bs использует flex поищите в сети или здесь на so как прибить подвал к низу на flex это и будет ответ
22 мар 2020 в 5:50
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Изначально рекомендую ознакомиться с основами верстки и документацией по bootstrap.
- webref.ru
- webref.ru/layout/bootstrap4
- getbootstrap.com/docs/4.4
Что не так в Вашем примере?!
То что Вы просто задаете footer просто состояние position: absolute , а нужно дополнительно положение top , left . C расчетом, что подвал будет позиционироваться относительно body (либо ближайшего родителя с position: relative ).
Если дополнительно задать еще и right: 0 , то footer растянется на всю ширину контента (с учетом max-width и margin: 0 auto; у container ).
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'); body < background-color: yellow !important; >header < background-color: red; >main < background-color: green; >footer
HEADER CONTENT Но в bootstrap 4 уже все продумали для подобных случаев.
И видим пример разметки для абсолютного позиционирования внизу страницы
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'); body < background-color: yellow; >header < background-color: red; >main < background-color: green; >footer
HEADER CONTENT Либо так:
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'); body < background-color: yellow; >header < background-color: red; >main < background-color: green; >footer
HEADER CONTENT С отступами, т.е. внутри container и контентом на всю высоту:
html, body
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'); html, body
HEADER CONTENT