Промывка нижнего колонтитула в нижней части страницы Твиттер бутстрап

Я вообще знаком с техникой промывки нижнего колонтитула с помощью css и следующий подход.

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

26 265
css twitter-bootstrap footer

26 ответов:

нашли фрагменты здесь работает очень хорошо для Bootstrap

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)

289

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

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

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

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

Docs:http://getbootstrap.com/components/#navbar-fixed-bottom

415

рабочий пример для Twitter bootstrap НЕ ЛИПКИЙ НИЖНИЙ КОЛОНТИТУЛ

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

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

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

67

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

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

на Нижний Колонтитул мы используем два DIV's в HTML для basic нижний колонтитул эффект. Напишите вот так:

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
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;
}
24

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

см. Пример Скрипка

17

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

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

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

я использовал его так:

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

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

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

11

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

удалить padding-top:70px из своего body тег и включить его в свой .container-fluid а не, вот так:

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

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

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

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

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

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

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

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

  • избегая "нервности" при загрузке страницы, сначала помечая невидимый и устанавливая видимый в 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;
});
8

на последняя версия bootstrap 4-Альфа, я смог сделать это с помощью .fixed-bottom класса. 

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

вот как я использую его с футера: 

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

вы можете найти дополнительную информацию в размещение документация здесь.

7

используйте компонент navbar и добавьте .navbar-фиксированный нижний класс:

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

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

  { padding-bottom: 70px; }
4

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

<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;
    }
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();
    });
});
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;
}
2
#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;
}
1

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

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

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

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
0

сохранить его простым.

footer {
  bottom: 0;
  position: absolute;
}

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

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

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

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

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

Pls не забудьте использовать twitter bootstrapp

0