Прижать 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 Простой пример. Как прижать футер к низу окна браузера при использовании Bootstrap
Не существует языка программирования, не важно как структурированного, который бы не дал программистам писать плохие программы.
Larry Flon
кодер.укр
Мы публикуем полезные материалы для веб разработчика с подробным описанием без лишней «воды», с рабочими (проверенными) примерами.
Основная наша задача — это донести материалы максимально просто и понятно до читателя.
Вы можете связаться с нами по э-почте: info@кодер.укр
или с помощью формы обратной связи
в последней версии Тор добавьте указаные строчки в файл «torrc-defaults»
конкуренты на бирают кучу таких адресов и получаются дубли главной: https://site.ru/?__c.
UPD. Нашел способ анимировать одной анимацией несколько кнопок. Может кому то будет полезн.
Подпишитесь на рассылку и Вы будете получать новые статьи первым.
Copyright © 2014 — 2023 by кодер.укр. All Rights Reserved.
Как привязать footer к низу экрана в Twitter Bootstrap?
Но решения, которые там предлагают, некорректно работают у меня.
Кто-нибудь сталкивался с такой же проблемой?
- Вопрос задан более трёх лет назад
- 151888 просмотров
Комментировать
Решения вопроса 1
Full-stack developer (Symfony, Angular)
Что бы прикрепить подвал к низу страницы есть много вариантов. Самые простые — добавить для html и body min-height:100% и position:relative; Затем обернуть все во вреппер с паддингом снизу равным высоте вашего подвала, и последнему назначить Position:absolute;bottom:0.
Если у вас не вышло — просто поищите статей. Их в сети море. А сам бутстрап поидее не должен хоть как-то этому мешать.
Ответ написан более трёх лет назад
Нравится 16 3 комментария
takeit @takeit Автор вопроса
Спасибо, получилось. Не там закрывал див враппера.
Хотя вчера бился перед сном целый час, не получалось. Все винил бутстрап.
Черт:)
Anisotropic @Anisotropic
А прокомментируйте пожалуйста, чем ваш вариант, сильно отличается по поведению от этого:
html, body height: 100%;
>
.wrapper min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -80px; /* Отрицательное значение высоты footer’а */
>
.footer, .push height: 80px; /* .push и .footer должны быть одинаковой высоты */
clear: both;
>
Просто всегда использовал именно его, а тут задумался, может быть есть варианты чем-то сильно лучше.
Historian111 @Historian111
костыли подъехали
Ответы на вопрос 22
Сергей Еремин @Sergei_Erjemin
Улыбайся, будь самураем.
Блин… что за советы… там есть встроенный класс: navbar-fixed-bottom
Ответ написан более трёх лет назад
Нравится 88 7 комментариев
Это должен быть accepted ответ 🙂
Спасибо!
Этот класс делает не совсем то, что по-видимому требовалось. Он заставляет футер прижаться к низу страницы и висеть там все время. А изначальная цель (как я понял) — это прижать футер к низу, если контента меньше, чем высота области окна, но если контента больше — футер должен уезжать вниз и не быть видным до момента скролла в самый низ.
Спасибо) актуально до сих пор
Спасибо, мужик
Александр Леон-Булатов @alexanderbulatov
Воооо, вот это ответ)
Спасибо!
Андрей @Andrey_PSK
Там как-бы в названии написано fixed. Этот способ явно не то. что требуется)
для bootstrap 3 есть отдельный пример с прижатым footer
getbootstrap.com/examples/sticky-footer
в файл стилей нужно добавить
html < position: relative; min-height: 100%; >body < /* Margin bottom by footer height */ margin-bottom: 60px; >#footer < position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; >Ответ написан более трёх лет назад
Нравится 43 6 комментариев
Артем Меньшов @Psychedelic
Вот это вообще идеально для меня подошло.
Большое спасибо!
Отличное решение!
мне тоже помогло,спасибо
Что за фиксированая высота футера в 60px? Про адаптивность не, не слышал начальнике? На мобильном футер будет в три раза больше чем 60 px.
Хороший пример, спасибо. А комментарий выше моего про 60px не правда. Все отлично отображается на разных устройствах.
То что нужно. Благодарю!
Для 4.0 работает тоже
https://getbootstrap.com/docs/4.0/examples/sticky-.
Я решил через скрипт, на мой взгляд так проще и не нужно городить враперы и лишние стили, кроме того футер не болтается всё время на экране
if ($(document).height() Ответ написан более трёх лет назад
Нравится 27 4 комментария
спасибо добрый человек
Спасибо за оригинальное решение
Мне больше нравится создавать таблицу такую
