Как прижать футер к низу страницы css bootstrap

Как прижать footer к низу в bootstrap 3?

Footer в Bootstrap 3 прижать к нижней части сайта очень просто. Нужно изменить код на примерно такой:

добавили nav с классом navbar-fixed-bottom, который прижимает footer к нижней части сайта.

И в стилях нужно внести небольшие изменения:

Весь код будет выглядеть так:

Насолько помню, при фиксации футера к низу экрана, для предотвращения перекрытия футером части контента, после основного содержимого контента необходимо вставить пустой контейнер высотой равной высоте футера. но это в обычном HTML. Подозреваю, что в Bootstrap это тоже необходимо?

В Bootstrap 4 не работает .navbar-fixed-bottom, вместо этого я так понимаю .fixed-bottom теперь нужно использовать. Но у меня он не остается после контента "приклеенным" внизу, а все время внизу экрана — перекрывая часть страницы.

Как в bootstrap footer прижать к низу экрана. Несколько простых решений

Доброго времени суток, дорогие читатели и подписчики блога. Сегодня я расскажу вам несколько способов, которые помогут в Bootstrap footer прижать к низу страницы. После прочтения данной статьи вы узнаете, в каких ситуациях этот прием применим, а также какие существуют инструменты и механизмы в Bootstrap 3 для решения поставленной задачи. Ну что ж, давайте приступим!

Где это применимо?

Основная масса сайтов содержит в себе примерно одинаковый набор частей, на которые разбивается первый: шапку (header), основной блок с контентом, место для меню, место для рекламы и «подвал» (footer). Все они могут размещаться на сервисе в различном порядке, а также дополняться другими объектами (слайдерами, лентами новостей, местами для комментариев и т.д.).

На сайтах футеры нужны для:

  • Указания авторства, года создания, названия компании, сервиса и т.д., и других похожих атрибутов;
  • Размещения навигационной панели;
  • Указания контактной информации и прочее.

Чемоданчик с инструментами

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

Если вы выбрали css – каскадные таблицы стилей – и язык разметки html, то здесь можно прибегнуть к таким решениям проблемы, как создание таблицы или же поиграться с позиционированием блоков. Если же вы предпочитаете работать с инструментами Bootstrap, то здесь на сцену выходят такие штуки, как fixed navigation bar и affix.

Меню, зафиксированное снизу

Если вам необходимо разместить навигационную панель сайта в его «подвале», то воспользуйтесь возможностями navigation bar. С его помощью можно закрепить меню как сверху экрана, так и снизу, используя класс .navbar- fixed- top или .navbar- fixed- bottom. Нас интересует второе.

<!DOCTYPE html> <html lang="en"> <head> <title>Bottom navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .little < width: 50%; margin-left: 25%; text-align: center; ></style> </head> <body> <nav navbar-fixed-bottom navbar-inverse"> <div <div <a href="#">МойБренд</a> </div> <ul navbar-nav"> <li href="#">О нас</a></li> <li><a href="#">Продукция</a></li> <li><a href="#">Доставкка и оплата</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> <div little"> <div <div <h2>Первый заголовок </h2> <h3>Здесь расположен как-то текстовый контент.</h3> <h2>Второй заголовок </h2> <h3>И его очень-очень-очень много!</h3> <!— Добавьте побольше текста, чтобы на веб-странице появился скролл —> </div> </div> </div> </body> </html>

Использование Affix Plugin

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

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

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .affix < bottom: 0; >footer < margin-left: -15px; text-align: center; height: 45px; width: 100%; color:#fff; background-color:#2196F3; ></style> </head> <body> <div style="color:#fff;background-color:#2196F3;height:150px;"> <h1>Пример работы плагина</h1> <h3>Пролистайте информацию на странице</h3> </div> <br> <div <div <div col-sm-6 col-sm-offset-3"> <h1>Много бесполезного текста. </h1> <h1>специально для появления скролла.</h1> <h1>Много бесполезного текста. </h1> <h1>специально для появления скролла.</h1> </div> </div> </div> <div <footer data-spy="affix" data-offset-bottom="0"> <p>Все права защищены</p> </footer> </div> </body> </html>

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

Как привязать footer к низу экрана в Twitter Bootstrap?

Но решения, которые там предлагают, некорректно работают у меня.

Кто-нибудь сталкивался с такой же проблемой?

  • Вопрос задан более трёх лет назад
  • 143406 просмотров
  • Facebook
  • Вконтакте
  • Twitter

Что бы прикрепить подвал к низу страницы есть много вариантов. Самые простые — добавить для html и body min-height:100% и position:relative; Затем обернуть все во вреппер с паддингом снизу равным высоте вашего подвала, и последнему назначить Position:absolute;bottom:0.

Если у вас не вышло — просто поищите статей. Их в сети море. А сам бутстрап поидее не должен хоть как-то этому мешать.

  • Facebook
  • Вконтакте
  • Twitter

А прокомментируйте пожалуйста, чем ваш вариант, сильно отличается по поведению от этого:

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;
>

Просто всегда использовал именно его, а тут задумался, может быть есть варианты чем-то сильно лучше.

Блин… что за советы… там есть встроенный класс: navbar-fixed-bottom

  • Facebook
  • Вконтакте
  • Twitter

thewind

Andrey_PSK

для bootstrap 3 есть отдельный пример с прижатым footer
getbootstrap.com/examples/sticky-footer

в файл стилей нужно добавить

  • Facebook
  • Вконтакте
  • Twitter

Psychedelic

Afres

adrin13

Vincent1

Naziron

Я решил через скрипт, на мой взгляд так проще и не нужно городить враперы и лишние стили, кроме того футер не болтается всё время на экране

  • Facebook
  • Вконтакте
  • Twitter

petrenco

Мне больше нравится создавать таблицу такую

  • Facebook
  • Вконтакте
  • Twitter

fearrr

igorgabby

Довольно-таки странные советы. Рекомендую вам использовать css flexbox-элементы. Тогда всё будет динамично и не придётся заморачиваться насчёт высоты футера и делать position: absolut.
Вам достаточно будет сделать так:

  • Facebook
  • Вконтакте
  • Twitter

При таком способе у меня content залазит на header
5b8580748813b432258314.jpeg

igorgabby

Решение для футера с "резиновой" (адаптивной) высотой"для Bootstrap 3. Реализация здесь

Вышеуказанные примеры сработали только на мониторе и не сработали на телефоне Плюс к этому у меня наполнение футера динамически может меняться в зависимости от количества страниц в группе. А так все отображается и на телефоне и на мониторе. Вообще при помощи CSS можно сделать много уже без javascript. Обратите внимание на технологию flexbox. Bootstrap 4 уже работает на ней

  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter

fearrr

Вот такое накидал решение.
Вроде бы все учел.

Пример html кода

  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter

Держите идеальный скрипт! Никаких костылей! Все работает четко!

  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter

sass mixin for Sticky footer

  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter

Достаточно все просто.

2 вариант не плох, но он не работает, если необходимо решить проблему с прокруткой по ширине. А именно: когда блок вылезает за пределы ширины экрана, делаем overflow, полосы снизу не будет, но стоит нажать мышку и провести по экрану, начинаются проблемы. В этом случае 2 вариант футера не подойдет. Поэтому, самое правильное, использовать 1 вариант и фикс от косяков экрана.

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

  • Facebook
  • Вконтакте
  • Twitter

У меня, почему-то, все получались то stiky (поверх текста внизу), то не внизу (если содержимого страницы на пол экрана). Помог скрипт, найденный здесь. "Грязно", но работает.

Теперь достаточно иметь элемент с .
Если текст не на весь экран, чтобы убрать полосу прокрутки, можно поменять 10 на 0.

  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter

aafrimenaa

В продолжение темы с футером в бутстрапе. Перепробовал кучу варинатов, но никак не могу зацепить футер к низу экрана. 2b2f1b6fdb6647af83f6df32dd622392.png
navbar-fixed-bottom работает, но фиксирует футер на экране, а это не красиво.

  • Facebook
  • Вконтакте
  • Twitter

adrin13

ctornton

Хоть и вопрос старый, увидел его и сам задался вопросом. Поможет людям, которые попадают через поиск.
К чему пришел я:

Вот как я решил проблему с футером, не обязательно в бутстрапе, просто при верстке макетов.
В css есть такая штука как calc (по-сути расчеты разные выполняет, высоту окна и прочие).
Нам надо main (блок для контента) сделать высотой 100% минус высота хэдера и футера
min-height: calc(100% — 160px);
тогда все получится идеально.

Ссылка с примером: https://jsfiddle.net/vpris/g14q6krt/41/
Набросал на скорую руку, с расчетами можно поиграться еще. Футер прижат прекрасно, не нужно городить js-код отслеживающий его положение.
Есть примеры с пустым блоком, который высотой такой же как футер. Самому подвалу дается отрицательный маржин, но мой пример поинтереснее.

Там есть стили для класса qube. Создайте несколько дивов с таким классом и проверьте, main красиво растягивается, футер уходит вниз.

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

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