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

Всем привет.
Не могу никак «прилепить» футер.

Гугл выдает github.com/twitter/bootstrap/issues/306

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

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

Спасибо.
  • Вопрос задан
  • 125162 просмотра
Решения вопроса 1
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Что бы прикрепить подвал к низу страницы есть много вариантов. Самые простые — добавить для html и body min-height:100% и position:relative; Затем обернуть все во вреппер с паддингом снизу равным высоте вашего подвала, и последнему назначить Position:absolute;bottom:0.

Если у вас не вышло — просто поищите статей. Их в сети море. А сам бутстрап поидее не должен хоть как-то этому мешать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 20
Sergei_Erjemin
@Sergei_Erjemin
Улыбайся, будь самураем...
Блин… что за советы… там есть встроенный класс: navbar-fixed-bottom

<div class="navbar-fixed-bottom row-fluid">
      <div class="navbar-inner">
          <div class="container">
Ответ написан
@web11
для 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;
}
Ответ написан
@RomeO_rzn
Я решил через скрипт, на мой взгляд так проще и не нужно городить враперы и лишние стили, кроме того футер не болтается всё время на экране

if ($(document).height() <= $(window).height())
	$("footer.footer").addClass("navbar-fixed-bottom");
Ответ написан
@Georgy1
Мне больше нравится создавать таблицу такую

<head>
<style>
table {
min-height: 100% !important;
}
tr#footer {
height: 50px; /*Тут ваша константа*/
}
</style>
</head>
<body>
<table>
<tr id="maincontent">
<td>
<-- Контент ваш -->
</td>
</tr>
<tr id="footer">
<td>
<-- Тело футера -->
</td>
</tr>
</table>
</body>


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

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 10vh;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10vh; /*высота футера будет зависеть от высоты экрана*/
}
/* чтобы весь футер заливался */
footer .row{
    background-color: #193441;
}


Вышеуказанные примеры сработали только на мониторе и не сработали на телефоне Плюс к этому у меня наполнение футера динамически может меняться в зависимости от количества страниц в группе. А так все отображается и на телефоне и на мониторе. Вообще при помощи CSS можно сделать много уже без javascript. Обратите внимание на технологию flexbox. Bootstrap 4 уже работает на ней
Ответ написан
igorgabby
@igorgabby
Довольно-таки странные советы. Рекомендую вам использовать css flexbox-элементы. Тогда всё будет динамично и не придётся заморачиваться насчёт высоты футера и делать position: absolut.
Вам достаточно будет сделать так:
<body>
ᅠᅠ<header>…</header>
ᅠᅠ<main class="content">…</main>
ᅠᅠ<footer>…</footer>
</body>

html, body {
ᅠᅠheight: 100%;
}
body {
ᅠᅠdisplay: flex;
ᅠᅠflex-direction: column;
}
.content {
ᅠᅠflex: 1 0 auto;
}
Ответ написан
Halfi
@Halfi
footer — position:absolute; bottom:0;
content — padding-bottom в размер с футер.
Товарисчи таблицоверстальщики, почитайте определение таблицы. B главное поймите, что такое таблица! Таблицы нужно для правильного предоставления информации пользователю, а разметка должна быть в блоках… Попробуйте разработчику невеб приложений рассказать, что Вы размечаете положение блоков с помощью таблиц, а не блоков (гм, каламбур..). Пользуйтесь правильными семантическими элементами. Можно и конвертами стену обклеить вместо обоев, но зачем, когда есть обои!?..
Ответ написан
fearrr
@fearrr
Вот такое накидал решение.
Вроде бы все учел.

var footer = $('.footer'),
    pageContainer = $('.page-container'),
    fixClass = 'navbar-fixed-bottom';

    function stickyFooter() {
        var windowHeight  = $(window).height(),
            contentHeight = pageContainer.height(),
            footerHeight  = footer.height();
        footer.removeClass(fixClass);
        if (contentHeight <= windowHeight-footerHeight){
            footer.addClass(fixClass);
        }
    }

    stickyFooter();
    $(window).resize(function () {
        stickyFooter();
    });


Пример html кода
<div class="page-container">
    <section class="header"></section>
    <section class="nav"></section>
    <section class="content"></section>
</div>
<div class="footer">
</div>
Ответ написан
@Leony
С точки зрения адаптивности лучше плюнуть и не использовать:
если будет контент – будет и прижимка.
А фиксированная высота – это излишнее усложнение.
Или использовать исключительно на страницах ошибок или где контента мало.
Ответ написан
@diversant123
Держите идеальный скрипт! Никаких костылей! Все работает четко!

$(function(){
    resizeAll();
    $(window).bind("resize", function(){
        resizeAll();
    });
});

$(window).bind('load', function() {resizeAll()});


function footerStickBottom (footer_block) {
    $(footer_block).css({'margin-top':0});
    var allWindowsHeight = $(window).height();
    var footerBottomOffset = $(footer_block).offset().top + $(footer_block).outerHeight();
    // console.log(allWindowsHeight);
    // console.log(footerBottomOffset);
    if (allWindowsHeight > footerBottomOffset) {
        var footerMarginTop = allWindowsHeight - footerBottomOffset;
        $(footer_block).css({'margin-top':footerMarginTop});
    }
}

function resizeAll() {

    footerStickBottom ('.footer');
    
}
Ответ написан
ajaxtelamonid
@ajaxtelamonid
Laravel
Можно сделать каркас с прижатым футером на csstemplater.com, например.
Ответ написан
@erdmko
sass mixin for Sticky footer

=sticky-footer($footer_height, $root_selector:"#root", $root_footer_selector:"#root_footer", $footer_selector:"#footer")
  html
    :height 100%
  body
    :height 100%
  #{$root_selector}
    :min-height 100%
    :margin-bottom -#{$footer_height}
    #{$root_footer_selector}
      :height #{$footer_height}
  #{$footer_selector}
    :clear            both
    :position         relative
    :height          #{$footer_height}
Ответ написан
@Leagnus
добавить класс navbar-static-bottom
Ответ написан
@Mad-cote
Достаточно все просто.

<html>
<body>
<div class="page">
-- Header --
-- Content --

-- Это если с fix --
<div id="fix"></div>
-- Это если с fix --
</div>

<footer class="footer">
</footer>
</body>
</html>


<style>
html, body {height:100%; position:relative;}
.page {margin:0 auto 60px; ИЛИ padding: 0 0 60px;}
.footer {height:60px; width:100%; position:absolute; bottom:0;}

ИЛИ если c fix

html, body {height:100%;}
.page {margin:0 auto -60px; }
#fix {padding:0 0 60px;}
.footer {height:60px;  position:relative;}
</style>


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

<style>
html, body {height:100%; position:relative; overflow-x:hidden;}
body {overflow:hidden; height:auto; min-height:100%;}
.page {margin:0 auto 60px; ИЛИ padding: 0 0 60px;}
.footer {height:60px; width:100%; position:absolute; bottom:0;}
</style>


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

<script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
 </script>

Теперь достаточно иметь элемент с id="footer".
Если текст не на весь экран, чтобы убрать полосу прокрутки, можно поменять 10 на 0.
Ответ написан
aafrimenaa
@aafrimenaa
IT-технологии
Всем привет.

В продолжение темы с футером в бутстрапе. Перепробовал кучу варинатов, но никак не могу зацепить футер к низу экрана. 2b2f1b6fdb6647af83f6df32dd622392.png
navbar-fixed-bottom работает, но фиксирует футер на экране, а это не красиво.
Ответ написан
ctornton
@ctornton
Мимо проходил, кому-то помог, сам научился.
Хоть и вопрос старый, увидел его и сам задался вопросом. Поможет людям, которые попадают через поиск.
К чему пришел я:

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

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

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

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

Войти через центр авторизации
Похожие вопросы