Промывка нижнего колонтитула до нижней части страницы, twitter bootstrap

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

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

Ответ 1

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

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

Источник: Демонстрация и Учебное пособие (больше не доступно; RIP)

Ответ 2

Теперь это включено в 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; } body { padding-bottom: 70px; } или иначе содержание страницы может быть покрыто.

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

Ответ 3

Рабочий пример для 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
Полоса прокрутки появится, если содержимое не помещается на экран.

Ответ 4

Здесь, как реализовать это с официальной страницы:

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

Ответ 5

Для 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;
}

Ответ 6

Гораздо упрощенный официальный пример: 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;
}

Ответ 7

Ну, я нашел смесь 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>

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

enter image description here

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

Ответ 8

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

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

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

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

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

Ответ 9

Ответ 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;
});

Ответ 10

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

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

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

Я использовал его следующим образом:

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

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

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

Ответ 11

Вам нужно обернуть ваш .container-fluid div, чтобы ваш липкий нижний колонтитул работал, вы также не указали некоторые свойства в своем классе .wrapper. Попробуйте следующее:

Удалите padding-top:70px из тэга body и добавьте его в свой .container-fluid, а именно:

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

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

Далее нам нужно удалить класс .wrapper вне вашего .container-fluid div и обернуть его div #main, например:

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

Ваш нижний колонтитул, конечно, должен быть вне div .wrapper, поэтому удалите его из 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;
   }
}

Ответ 12

Это правильный способ сделать это с помощью 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>

Ответ 13

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

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

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

  { padding-bottom: 70px; }

Ответ 14

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

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

Ответ 15

Вы можете использовать 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();
    });
});

Ответ 16

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

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

Ответ 17

Простейшим методом является использование 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>

Ответ 18

Протестировано с помощью 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;
}

Ответ 19

Используйте утилиты 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 в элементе контейнера, чтобы основной контейнер содержимого занимал все пространство, оставшееся в высоте области просмотра.

Ответ 20

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

Ответ 21

В соответствии с примером 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>).

Ответ 22

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

Ответ 23

Здесь вы найдете подход в 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

Ответ 24

Держите его простым.

footer {
  bottom: 0;
  position: absolute;
}

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

Ответ 25

Вот пример использования 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>

fiddle

Ответ 26

Вот как это делает bootstrap:

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

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

Ответ 27

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

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

Ответ 28

Используйте приведенный ниже класс, чтобы переместить его в последнюю строку страницы, а также сделать его центром. Если вы используете ruby на странице HAML для rails, вы можете использовать приведенный ниже код. %footer.card.text-center

Пожалуйста, не забудьте использовать Twitter bootstrapp

Ответ 29

Здесь решение для новейшей версии 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

Ответ 30

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

<div class="d-flex flex-column" style="min-height: 100vh">
  <header></header>
  <div class="container">
    <div>Some Content</div>
  </div>
  <footer class="mt-auto"></footer>
</div>
  • .d-flex сделать основной div гибким контейнером
  • .flex-column в главном div, чтобы упорядочить ваши flex-элементы в столбце
  • min-height: 100vh до основного div, либо с атрибутом style, либо в вашем css, чтобы заполнить область просмотра вертикально
  • .mt-auto для элемента .mt-auto колонтитула, чтобы верхний край .mt-auto колонтитула занимал все пространство, оставшееся в высоте области просмотра.