Промывка нижнего колонтитула внизу страницы, начальная загрузка Twitter

306

Я в целом знаком с техникой очистки нижнего колонтитула с помощью CSS.

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

css twitter-bootstrap footer Кельвин Ченг
источник

Прежде чем тестировать все ответы ниже, имейте в виду, что OP хочет, чтобы он работал с загрузчиком Twitter. Поскольку это не обязательно, загрузчик Twitter работает с Jquery, что означает, что он включен Javascript. По этой причине просто протестируйте мой ответ: stackoverflow.com / questions / 10099422 /…

HenryW

4

Официальный пример: getbootstrap.com/examples/sticky-footer-navbar/…

пользователь

1

Ссылка не работает! Может кто-нибудь исправить официальную ссылку на пример?

PassionInfinite

1

@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar это может стать более старой версией в будущем из-за 4.0, я думаю.

Аммад Халид

324

Найденные фрагменты здесь работают очень хорошо для начальной загрузки

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Чуан Ён
источник

Это лучшее решение, которое я пробовал до сих пор. Принято это как ответ.

Кэлвин Ченг

Привет, я реализовал этот метод, он отлично работает, но теперь у меня есть некоторые проблемы с отображением страницы на iphone (страница увеличена). Есть идеи, в чем проблема? Вот некоторые подробности: stackoverflow.com/questions/18621090/…

pupadupa

94

На всякий случай, если вы прочитали этот ответ и не прокручивали его, стоит посмотреть другие ответы

MattyW

4

особенно этот: stackoverflow.com/questions/10099422/…

HenryW

1

Это лучший метод, который я нашел для Bootstrap. Для отзывчивости устройства не забывайте использовать медиазапросы для обновления высоты #main и .footer для экрана разных размеров

SyntaxGoonoo

467

Теперь это включено в Bootstrap 2.2.1.

Bootstrap 3.x

Используйте компонент navbar и добавьте .navbar-fixed-bottomкласс:

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

Не забудьте добавить body { padding-bottom: 70px; }или иначе содержание страницы может быть покрыто.

Документы: http://getbootstrap.com/components/#navbar-fixed-bottom

Санон
источник

35

@ChuanYeong К сожалению нет navbar-static-bottom.

Лоуренс Вудман

25

@MikeCurry он спросил не о фиксированном нижнем колонтитуле, а о том, который «заполняет» пустое пространство, если на вашей странице недостаточно содержимого, чтобы нижний колонтитул оставался внизу. Если ваш нижний колонтитул носит исключительно информационный характер, фиксированный занимает только ценное пространство.

13

22

Это не липкий нижний колонтитул, потому что он используется position: fixed; что не правильно

Фуркат У.

9

Да, это решение только сбрасывает на нижнюю часть окна просмотра, а не внизу страницы. т.е. нижний колонтитул всегда виден.

RISM

3

Пришлось преуменьшить ответ, потому что это дает путаницу. ОП не хочет липкий нижний колонтитул.

HenryW

77

Рабочий пример для Twitter-бутстрапа NOT STICKY FOOTER

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

Версия, которая всегда обновляется, если пользователь открывает окно devtools или изменяет размеры.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Вам нужен хотя бы элемент с `#footer`

Если вам не нужна полоса прокрутки, если контент помещается на экран, просто измените значение с 10 на 0.
Полоса прокрутки появится, если контент не помещается на экран.

HenryW
источник

9

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

meecect

3

каждое решение, на которое я смотрел, неверно. Это ЕДИНСТВЕННЫЙ, который на самом деле делает то, что должен делать - прикрепляет нижний колонтитул к нижней части страницы, не закрывая контент, если размер браузера изменен.

Дейв

13

это не сработало так, как ожидалось для меня, тем не менее, один из лучших ответов, я исправил свою проблему, заменив $('#footer').height();на$('#footer').outerHeight();

DarkMukke

3

Отличный ответ! У меня была пара адаптаций, которые, я думаю, улучшают это здесь: stackoverflow.com/a/36385654/8207

Кори

6

Лучший ответ, который я нашел. Если вы хотите, чтобы он работал после изменения размера окна, просто поместите основной код из ответа внутрь $(window).resize(function() {//main code goes here});и вызовите его, $(window).resize();чтобы установить его при загрузке страницы.

Шимон Садло

36

Вот как это сделать на официальной странице:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Я только что проверил это прямо сейчас, и это работает здорово! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Соответствующий код CSS это:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

Лениэль Маккаферри
источник

7

Спасибо за публикацию, это было определенно лучшее решение (не говоря уже о единственном, который работал) для моего конкретного проекта, и, конечно, приятно, что оно прямо из самого проекта.

Кори В.

1

Я не знаю, в чем заключалась сделка, но я не мог заставить ее работать, не добавив прокрутку к страницам. Я закончил тем, что изменил CSS .wrapper так, чтобы минимальная высота была «calc (100% - 120px)», где 120px - высота моего нижнего колонтитула, и удалил <div id = "push"> </ div> из html так как он, кажется, ничего не делает, кроме добавления высоты к странице, которая мне не нужна.

jammyman34

36

Для Sticky Footer мы используем два DIV'sв HTML для базового эффекта липкого нижнего колонтитула . Напишите так:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

Сандип
источник

7

Он сказал, что использует Twitter Bootstrap. Что было бы самым простым способом интегрировать это в Bootstrap без полного переписывания HTML?

Коди Грей

1

Если ОП хочет добиться эффекта липкого

нижнего

Спасибо! Это был единственный метод, который на самом деле работал для меня на сайте ASP.NET MVC5, который использует Bootstrap. +1

Янн Дюран

30

Гораздо проще официальный пример: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

пользователь
источник

19

Ну, я нашел смесь navbar-innerи navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Вроде хорошо и у меня работает

введите описание изображения здесь

Смотрите пример в Fiddle

Максим Шустин
источник

2

самое простое и элегантное решение. Остерегайтесь домашнего создания своего собственного кода CSS, поскольку он не будет обратно совместим с начальной

загрузкой

Я использовал это, и у меня была проблема на старом андроиде (может быть, Фрой?) Со страницами, которые были короче экрана. В остальном это хорошо работало на FF, Chrome, IE11, iPhone,

Nexus

Идеально и очень просто!

ramires.cabral

18

В последней версии bootstrap 4.3 это можно сделать с помощью .fixed-bottomкласса.

<div class="fixed-bottom"></div>

Вот как я использую его с нижним колонтитулом:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Вы можете найти больше информации в документации о положении здесь .

Мохамед Али ДЖАМАУИ
источник

1

Это все еще работает с выпущенной официальной версией 4.

Klewis

Обратите внимание, что пример по адресу getbootstrap.com/docs/4.1/examples/sticky-footer имеет стиль line-height = 60px для элемента нижнего колонтитула. Это не только не нужно, но и препятствует правильной работе нижнего колонтитула, если он является родителем одного или нескольких элементов div, что обычно имеет место.

ScottyB

13

Ответ от HenryW хороший, хотя мне нужно было несколько настроек, чтобы все заработало так, как я хотел. В частности, следующее также обрабатывает:

Чтобы избежать «скачка» при загрузке страницы, сначала отметьте невидимое и настройку, видимую в javascript
Работа с браузером изменяет размер изящно
Кроме того, настройка нижнего колонтитула создает резервную копию страницы, если браузер становится меньше, а нижний колонтитул становится больше страницы
Настройки высоты функции

Вот что сработало для меня с этими настройками:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Cory
источник

11

Это сработало для меня отлично.

Добавьте этот класс navbar-fixed-bottom в нижний колонтитул.

<div class="footer navbar-fixed-bottom">

Я использовал это так:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

И он устанавливает снизу по всей ширине.

Изменить: Это сделает нижний колонтитул всегда видимым, это то, что вы должны принять во внимание.

sp_omer
источник

10

Вам нужно обернуть ваш .container-fluiddiv, чтобы ваш липкий нижний колонтитул работал, вам также не хватает некоторых свойств в вашем .wrapperклассе. Попробуй это:

Удалите padding-top:70pxиз вашего bodyтега и включите его в свой .container-fluid, например, так

.wrapper > .container-fluid {
    padding-top: 70px;
}

Мы должны сделать это, потому что нажатие bodyвниз, чтобы разместить навигационную панель, в конечном итоге толкает нижний колонтитул немного дальше (на 70 пикселей дальше) за область просмотра, поэтому мы получаем полосу прокрутки. Мы получаем лучшие результаты, .container-fluidвместо этого нажимая div.

Затем мы должны удалить .wrapperкласс за пределами вашего .container-fluiddiv и обернуть #mainего этим следующим образом:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Ваш нижний колонтитул, конечно, должен быть вне .wrapperdiv, поэтому удалите его из div .wrapper и поместите его снаружи, вот так:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

После того, как все это сделано, правильно подвиньте нижний колонтитул ближе к вашему .wrapperклассу, используя отрицательное поле, например:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

И это должно работать, хотя вам, вероятно, придется изменить несколько других вещей, чтобы заставить его работать при изменении размера экрана, например сбросить высоту в .wrapperклассе, например:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Андрес Ильич
источник

9

Это правильный способ сделать это с помощью Twitter Bootstrap и нового класса navbar-fixed-bottom: (вы не представляете, сколько времени я потратил на это)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Режис Б.
источник

9

Используйте утилиты flex, встроенные в Bootstrap 4! Вот что я придумал, используя в основном утилиты Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex сделать основной div гибким контейнером
.flex-column на главном div, чтобы расположить ваши flex-элементы в столбце
min-height: 100vh в основной div, либо с атрибутом style, либо в вашем CSS, чтобы заполнить область просмотра по вертикали
.flex-grow-1 в контейнере элемент, чтобы основной контейнер содержимого занимал все пространство, оставшееся в высоте области просмотра.

EGhost57
источник

Вместо того , чтобы min-height: 100vhв min-vh-100классе с Bootstrap можно использовать.

икону

Это решение прекрасно работало в том числе мин-ОГО-100 предложения от @ikonuk

TGR

4

Используйте компонент navbar и добавьте класс .navbar-fixed-bottom:

<div class="navbar navbar-fixed-bottom"></div>

добавить тело

  { padding-bottom: 70px; }

Admin File3
источник

3

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

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

затем вы можете использовать css для переопределения классов начальной загрузки для настройки высоты, шрифта и цвета

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

1-14x0r
источник

3

Вы можете использовать jQuery для обработки этого:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

DucCuong
источник

2

Единственный, который работал на меня!

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Рикардо
источник

2

Самым простым методом, вероятно, является использование Bootstrap navbar-static-bottomв сочетании с установкой основного контейнера div с помощью height: 100vh(новый процент просмотра порта CSS3 ). Это приведет к сноске нижнего колонтитула.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Пан Вангперавонг
источник

2

Проверено с Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

Душан Магар
источник

1

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Высота нижнего колонтитула соответствует размеру нижнего отступа элемента переноса.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Sharpless512
источник

1

Вот решение для новейшей версии Bootstrap (4.3 на момент написания) с использованием Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

И пример codepen: https://codepen.io/tillytoby/pen/QPdomR

Том Т
источник

1

В соответствии с примером Bootstrap 4.3 , в случае, если вы теряете здравомыслие, как я, это действительно работает:

Все родители нижнего колонтитула должны иметь height: 100%( h-100класс)
Прямой родитель нижнего колонтитула должен иметь display: flex( d-flexкласс)
Нижний колонтитул должен иметь margin-top: auto( mt-autoкласс)

Проблема в том, что в современных интерфейсных средах у нас часто есть дополнительные обертки вокруг этих элементов.

Например, в моем случае с Angular я создал представление из отдельного корня приложения, основного компонента приложения и компонента нижнего колонтитула - все они добавили свой собственный элемент в DOM.

Итак, чтобы это работало, мне нужно было добавить классы к этим элементам-оберткам: дополнительные h-100, переместить d-flexодин уровень вниз и переместить mt-autoодин уровень вверх от нижнего колонтитула (так что на самом деле это уже не класс нижнего колонтитула, а мой <app-footer>пользовательский). элемент).

MrValueType
источник

Я должен был поставить class="h-100"на <html>тег тоже.

Кел

1

Используйте этот кусок кода в начальной загрузке, это работает

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

Санджай
источник

1

Bootstrap v4 + решение

Вот решение, которое не требует переосмысления структуры HTML или каких-либо дополнительных хитростей CSS, связанных с отступами:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

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

Почему это работает

style="height:100%;"заставляет <html>тег занимать все пространство документа.
класс d-flexустанавливает display:flexдля нашего <body>тега.
класс flex-columnустанавливает flex-direction:columnдля нашего <body>тега. Его дети ( <header>, <main>,<footer> и любой другой прямой ребенок) теперь выровнены по вертикали.
класс h-100устанавливает height:100%наш <body>тег, то есть он будет покрывать весь экран по вертикали.
класс flex-grow-1устанавливает flex-grow:1наш <main>, эффективно инструктируя его заполнить все оставшееся вертикальное пространство, таким образом, достигая 100% вертикальной высоты, которую мы установили ранее для нашего <body>тега.

Рабочая демонстрация здесь: https://codepen.io/maxencemaire/pen/VwvyRQB

См. Https://css-tricks.com/snippets/css/a-guide-to-flexbox/ для получения дополнительной информации о flexbox.

Kathandrax
источник

h-100класс не работает должным образом, лучше использовать min-vh-100.

икону

@ikonuk Что именно вы подразумеваете под "не работает должным образом"? Пожалуйста, дополните.

Катандракс

Потому что h-100класс всегда зависит от высоты родительских элементов и в некоторых случаях может не работать должным образом. Поскольку мы хотим, чтобы нижний колонтитул находился внизу области просмотра, было бы полезно использовать высоту области просмотра.

икону

Опять же, определите «некоторые случаи». Ваш аргумент о родительской зависимости относится точно так же к min-width. Вот почему HTMLтег имеет height100% в коде. Этот пример работает, и я не понимаю, почему он не дал кросс-браузерную поддержку для heightсвойства CSS , что в конечном итоге и переводит фрагмент Bootstrap.

Катандракс

Я не говорил, что твой пример не работает. Не все используют стиль в HTMLтеге. В моем случае ваше решение не сработало, так как я не предпочитаю использовать стиль в HTMLтеге. И я не хочу, чтобы bodyтег зависел от другого родителя, а от области просмотра. Не нужно ставить style="height:100%;"и h-100одновременно. Помещение min-vh-100в тело просто делает работу и меньше кода.

икону

0

Похоже, что height:100%«цепь» разрывается на div#main. Попробуйте добавить height:100%к нему, и это может приблизить вас к вашей цели.

brains911
источник

0

Здесь вы найдете подход в HAML ( http://haml.info ) с навигационной панелью вверху и нижним колонтитулом внизу страницы:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Ханнес
источник

Не могли бы вы подробнее рассказать о своем ответе? Ответы только на код, как правило, не рекомендуется.

Qix - МОНИКА Плохо обращалась с

1

Хорошо, что ты хочешь знать?

Ханнес

Мне не нужно это знать, но кто-то позже заходит на этот сайт, возможно, не знает точно, почему код вашего ответа делает то, что делает.

Qix - МОНИКА Плохо обращалась с

Вероятно, я должен удалить это. Я написал новое вступление. :)

Ханнес

0

Будь проще.

footer {
  bottom: 0;
  position: absolute;
}

Вам также может понадобиться сместить высоту нижнего колонтитула, добавив margin-bottomэквивалент высоты нижнего колонтитула в body.

obfk
источник

0

Вот пример использования css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

играть на скрипке

Виктор
источник

0

Вот как загрузчик делает это:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Просто используйте источник страницы, и вы сможете увидеть. Не забудьте <div id="wrap">верх.

Брен
источник

0

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

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

GeorgeWL
источник

Промывка нижнего колонтитула внизу страницы, начальная загрузка Twitter

Ответы:

Вам нужен хотя бы элемент с #footer

Bootstrap v4 + решение

Почему это работает

Вам нужен хотя бы элемент с `#footer`