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

253

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

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

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

26 ответов

311
Лучший ответ

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

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)

Поделиться
  • 0
    Это лучшее решение, которое я пробовал до сих пор. Принято это как ответ.
  • 15
    почему .clear-top ?
Показать ещё 10 комментариев
424

Теперь это включено в 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

Поделиться
  • 33
    @ChuanYeong К сожалению, нет navbar-static-bottom .
  • 1
    @LawrenceWoodman Uugh только что понял это. Виноват. Оказывается, я более или менее реализовал липкий нижний колонтитул перед тем, как поместить в navbar-static-bottom. Так что я думал, что класс на самом деле работает .. святая хрень. Да, во всяком случае, Navbar-fixed-bottom не совсем то, о чем просил OP.
Показать ещё 9 комментариев
72

Рабочий пример для 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>

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

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

Поделиться
  • 4
    безусловно, самый простой ответ здесь.
  • 1
    В качестве альтернативы, чтобы нижний колонтитул оставался на месте и располагался на одном уровне, измените margin-top на padding-bottom в JS.
Показать ещё 9 комментариев
34

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

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;
    }
}
Поделиться
  • 6
    Спасибо за публикацию, это было определенно лучшее решение (не говоря уже о единственном, которое сработало) для моего конкретного проекта, и, конечно, приятно, что оно прямо из самого проекта.
  • 1
    Работал отлично для меня тоже. Другие решения выше этого не работали.
Показать ещё 3 комментария
32

Для 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
    Он сказал, что использует Twitter Bootstrap. Что было бы самым простым способом интегрировать это в Bootstrap без полного переписывания HTML?
  • 1
    Если ОП хочет добиться эффекта липкого нижнего колонтитула, он должен поменять свой MarkUp
Показать ещё 3 комментария
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;
}
Поделиться
  • 2
    Чем проще и, на мой взгляд, лучше подойти. Спасибо
  • 2
    гений, это работает очень хорошо.
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>

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

Изображение 2347

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

Поделиться
  • 2
    самое простое и элегантное решение. Остерегайтесь домашнего создания собственного кода CSS, поскольку он не будет обратно совместим с начальной загрузкой
  • 0
    Я выбрал это
Показать ещё 2 комментария
11

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

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

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

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

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

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

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

Поделиться
10

Вам нужно обернуть ваш .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;
   }
}
Поделиться
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>
Поделиться
8

Ответ 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;
});
Поделиться
7

В последней версии начальной загрузки 4-альфа я смог сделать это с .fixed-bottom класса .fixed-bottom.

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

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

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

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

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

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

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

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

  { padding-bottom: 70px; }
Поделиться
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;
    }
Поделиться
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

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

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

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

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
Поделиться
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

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

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

Поделиться
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

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

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

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

Поделиться
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>

fiddle

Поделиться
0

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

footer {
  bottom: 0;
  position: absolute;
}

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

Поделиться
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
    Не могли бы вы подробнее рассказать о своем ответе? Ответы только на код, как правило, не рекомендуется.
  • 1
    Хорошо, что ты хочешь знать?
Показать ещё 2 комментария
0

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню