Вопрос по twitter-bootstrap, css – Промывка нижнего колонтитула внизу страницы, начальная загрузка Twitter

268

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

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

Официальный пример:getbootstrap.com/examples/sticky-footer-navbar/… user
Прежде чем тестировать все ответы, приведенные ниже, имейте в виду, что OP хочет, чтобы он работал с загрузчиком Twitter. Поскольку это не обязательно, загрузчик Twitter работает с Jquery, что означает, что он включен Javascript. По этой причине просто протестируйте мой ответ:stackoverflow.com/questions/10099422/… HenryW

Ваш Ответ

26   ответов
1

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

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;
}
Чем проще и, на мой взгляд, лучше подойти. Спасибо
гений, это работает очень хорошо.
0

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
Хорошо, что ты хочешь знать?
Мне не нужно это знать, но кто-то, зашедший на этот сайт позже, может не знать точноwhy код вашего ответа делает то, что делает.
Не могли бы вы подробнее рассказать о своем ответе? Ответы только на код, как правило, не рекомендуется.
Вероятно, я должен удалить это. Я написал новое вступление. :)
33

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;
    }
}
Работал отлично для меня тоже. Другие решения выше этого не работали.
Последняя ссылка:getbootstrap.com/examples/sticky-footer
Я не знаю, в чем заключалась сделка, но я не смог заставить ее работать без добавления прокрутки к страницам. Я закончил тем, что изменил CSS .wrapper так, чтобы минимальная высота была "calc (100% - 120px)" где 120px - это высота моего нижнего колонтитула и удален тег & lt; div id = & quot; push & quot; & lt; / div & gt; из HTML, так как он, кажется, ничего не делает, кроме добавления высоты к странице, которая мне не нужна.
Это пока лучшее решение, которое я нашел.
Спасибо за публикацию, это было определенно лучшее решение (не говоря уже о единственном, который работал) для моего конкретного проекта, и, конечно, приятно, что оно прямо из самого проекта.
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;
}
9

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

Avoiding the "jumpiness" on page load by first marking invisible and setting visible in javascript Dealing with browser resizes gracefully Additionally setting the footer back up the page if the browser gets smaller and the footer becomes bigger than the page Height function tweaks

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

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

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

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

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

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

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

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

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

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

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

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

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

71

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>
You need at least an element with a #footer

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

это не работает тихо, как и ожидалось для меня, тем не менее, один из лучших ответов, я исправил свою проблему, заменив$('#footer').height(); с$('#footer').outerHeight();
безусловно, самый простой ответ здесь.
Лучший ответ, который я нашел. Если вы хотите, чтобы он работал после изменения размера окна, просто поместите основной код из ответа внутри$(window).resize(function() {//main code goes here}); и вызвать$(window).resize(); установить его при загрузке страницы.
Да, я тоже пошел с этим. CSS может иногда быть таким глупым. Не то, чтобы это было невозможно, но решения общего назначения могут быть трудны для поиска, и исправление таких раздражающих вещей в наших макетах не должно совершать поездок для обмена стеками, многократных пересмотров сущности, межбраузерного тестирования и возможной сдачи простой трюк JS. Да, я чувствую себя немного грязно, но, по крайней мере, это работает.
429

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

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

Это не липкий нижний колонтитул, потому что он используется position: fixed; что не правильно
@ChuanYeong к сожалению нетnavbar-static-bottom.
@MikeCurry он спросил не о фиксированном нижнем колонтитуле, а о том, который "заполняет" пустое пространство, если на вашей странице недостаточно содержимого, чтобы нижний колонтитул оставался внизу. Если ваш нижний колонтитул носит исключительно информационный характер, фиксированный занимает только ценное пространство.
Пришлось преуменьшить ответ, потому что это дает путаницу. ОП не хочет липкий нижний колонтитул.
Да, это решение только сбрасывает на нижнюю часть окна просмотра, а не внизу страницы. то есть нижний колонтитул всегда виден.
2

$(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();
    });
});
31

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

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
Он сказал, что использует Twitter Bootstrap. Что было бы самым простым способом интегрировать это в Bootstrap без полного переписывания HTML?
Кто меня опускает, пожалуйста, объясните, где я не прав. Спасибо :)
Если ОП хочет добиться эффекта липкого нижнего колонтитула, он должен изменить свой пометку.
Спасибо! Это был единственный метод, который на самом деле работал для меня на сайте ASP.NET MVC5, который использует Bootstrap. +1
Работает! Должен быть № 1 в Google для липкого нижнего колонтитула.
301

Вот очень хорошо работает для начальной загрузки

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

Источник:демонстрация а такжеРуководство (больше недоступно;ПОКОЙСЯ С МИРОМ)

Это лучшее решение, которое я пробовал до сих пор. Принято это как ответ. Calvin Cheng
Это лучший метод, который я нашел для Bootstrap. Для отзывчивости устройства не забывайте использовать медиазапросы для обновления высоты #main и .footer для экрана разных размеров.
особенно этот:stackoverflow.com/questions/10099422/…
На тот случай, если вы прочитали этот ответ и не прокрутили его вниз, стоит посмотреть другие ответы.
Зачем.clear-top?
2

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

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

Просьба не забывать использовать Twitter bootstrapp.

10

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

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

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

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

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

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

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

Будь проще.

footer {
  bottom: 0;
  position: absolute;
}

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

0

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>

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

7

вПоследняя версия бутстрапа4-alphaЯ смог сделать это используя.fixed-bottom учебный класс.

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

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

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

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

Это все еще работает с выпущенной официальной версией 4.
Обратите внимание, что пример наgetbootstrap.com/docs/4.1/examples/sticky-footer имеет стиль line-height = 60px для элемента нижнего колонтитула. Это не только не нужно, но и препятствует нормальной работе нижнего колонтитула, если он является родителем одного или нескольких элементов div, что обычно имеет место.
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;
    }
9

класса 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>
4

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

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

  { padding-bottom: 70px; }
18

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

Смотрите пример вскрипка

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

Похожие вопросы