Twitter Bootstrap 3 Sticky Footer

204

Я уже давно использую фреймворк Twitter, и они недавно обновились до версии 3!

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

html css twitter-bootstrap twitter-bootstrap-3 Брэд Флетчер
источник
31
официальный пример: getbootstrap.com/examples/sticky-footer-navbar
ptim
3
@memeLab, почему в официальном примере ничего не говорится о поле margin-bottom: -60px? Или я это пропустил ...?
Гандерс
Добавлено решение только для CSS, позволяющее изменять высоту нижнего колонтитула. Связал это здесь, так как, будучи новым ответом, это внизу страницы.
Дао

Ответы:

194

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

<div class="footer navbar-fixed-bottom">
Джон
источник
32
это не то же самое, что липкий нижний колонтитул
Юра Омельчук
3
Если у вас есть верхний и нижний колонтитулы, вы теряете слишком много места на мобильном устройстве.
Страттон
4
@strattonn - вот для чего
нужны медиазапросы
20
Это прекрасно работает, если страница не нуждается в прокрутке. Но нижний колонтитул перекрывается с большим количеством контента на странице. Любой обходной путь на этом? Спасибо!
Xplora
1
не уверен насчет проблемы перекрытия, но разве добавление полей / отступов не решает проблему?
Джон
152

Ссылаясь на официальный пример липкого нижнего колонтитула Boostrap3, добавлять не нужно <div id="push"></div>, а CSS проще.

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;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

и необходимый HTML:

<body>

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

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

Вы можете найти ссылку для этого css в исходном коде примера sticky-footer .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

Полный URL: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

tkymtk
источник
21
HTML & CSS в официальном примере с липким нижним колонтитулом теперь сильно отличается от того, что описано здесь, например, больше не используется div 'wrap'.
Янв
52

Вот метод, который добавляет липкий нижний колонтитул, который не требует никакого дополнительного CSS или Javascript, кроме того, который уже находится в Bootstrap, и не будет мешать вашему текущему нижнему колонтитулу.

Пример здесь: Easy Sticky Footer

Просто скопируйте и вставьте это прямо в ваш код. Нет суеты, нет суеты.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
anataliocs
источник
4
Очень красиво и быстро. Может быть отзывчивым. Но необходимо добавить дополнительное пространство внизу содержимого страницы, чтобы оно не скрывалось нижним колонтитулом. Пространство должно иметь высоту, равную высоте нижнего колонтитула. Можете ли вы показать, как лучше всего это сделать? Кстати, "не требует CSS" технически неправильно. Это должно быть "не требует никаких дополнительных CSS, кроме классов Bootstrap" .
ADTC
1
Мне нравится, что это использует то, что существует в начальной загрузке. Я не мог заставить другие топовые ответы работать, но вставил это в мою страницу и бац, липкий нижний колонтитул. Спасибо!
haakon.io
34

В дополнение к CSS, который вы только что добавили, помните, что вам нужно добавить push div перед закрытием div

Основная структура для HTML 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Live view
Редактировать вид

Дэвид Тайароа
источник
Если содержимое страницы больше доступного дисплея, нижний колонтитул будет сдвинут вниз. Я бы хотел, чтобы нижний колонтитул был действительно привязан к нижней части (как navbar-fixed-bottom)
blueFast
эй @delavnog, тебе что-нибудь понравится? codepen.io/panchroma/pen/wMXWpY . Единственные важные для вас биты - это HTML-код в строке 647 и CSS
Дэвид Тайароа,
@delavnog, та же идея с минимальным содержанием на странице codepen.io/panchroma/pen/JGZKqy
Дэвид Тайароа
Спасибо, это здорово! Теперь, если бы я мог расположить основной div вертикально по центру между nav и footer, это было бы здорово! Отредактировал ваш codepen: codepen.io/anon/pen/rxKMaW (мне пришлось добавить поле для тела, потому что навигация
поглощает
@delavnog, вот начало, если основная часть не слишком высока. Хотя для более длинного контента потребовалось
Дэвид Тайароа
30

Вот упрощенный код Sticky Footer на сегодняшний день, потому что они всегда оптимизируют его, и это ХОРОШО:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
Лениэль Маккаферри
источник
1
Идеальное решение. Это то, что я искал.
Левимат
1
К сожалению, этот нижний колонтитул имеет фиксированный размер. Иногда, когда нижний колонтитул является динамическим, он может быть больше или меньше его высоты в CSS.
23W
27

Я немного опаздываю на эту тему, но я наткнулся на этот пост, так как меня укусил этот вопрос, и, наконец, я нашел действительно простой способ преодолеть его, просто используйте a navbarс navbar-fixed-bottomвключенным классом. Например:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

НТН

IMIL
источник
Мне нравится простота и эффективность вашего ответа, который, кстати, является разумным ответом. Многие ответы на одну и ту же проблему полны jquery и сложных вещей. Спасибо чувак.
digitai
1
Это половина решения, вам все равно нужно позаботиться о наложении контента на вашей странице, если вы измените его размер.
Балдрани
@ Baldráni Нет, это полное решение, перекрытия работают нормально, если вы используете Bootstrap row и col в html нижнем колонтитуле (что вам и следует делать)
Tino Mclaren
Это не липкий колонтитул. Это фиксированная нижняя панель навигации, которая подходит только для контента панели навигации и перекрывает содержимое страницы.
Зим
10

Вот мое обновленное решение этой проблемы. 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

И используйте это так: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Или 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
зет
источник
4
Это не хорошее решение, потому что ваш нижний колонтитул зафиксирован, что означает, что он перекрывает содержимое страницы (если есть). Попробуйте добавить несколько some text<br>строк перед нижним колонтитулом и уменьшить размер окна.
jmarceli
@ user2041318: да, это ужасно ... спасибо за указание на это.
Себастьян
Это было исправлено согласно комментарию jmarceli. Нижний колонтитул больше не фиксируется.
Зи
3

Липкий пример не работает для меня. Мое решение:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Энди Гига
источник
Простой, старый добрый CSS. Работа выполнена. Я нахожу забавным, насколько запутанными являются некоторые из ответов с более высоким рейтингом. Разве Bootstrap не должен облегчать нашу жизнь? Kal
Кал
2

Толчок divдолжен идти сразу после wrap, а не внутри .. просто так 

<div id="wrap">
  *content goes here*
</div>

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

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
Джозеф
источник
2

Ответ от ОП:

Добавьте это в свой файл CSS.

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

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
CodeCaster
источник
2

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

Текущий (2 октября 16) Bootstrap 3 css Липкий нижний колонтитул (фиксированный размер) выглядит следующим образом:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

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

Сделать гибким: Удалить поле css и высоту нижнего колонтитула. Затем добавьте JavaScript, чтобы получить высоту нижнего колонтитула и задайте поле marginBottom. Это делается с помощью функции setfooter (). Затем добавьте прослушиватели событий при первой загрузке страницы и при изменении размера, которые запускают setfooter. Примечание. Если в нижнем колонтитуле есть аккордеон или что-либо еще, что вызывает изменение размера, без изменения размера окна, вы должны снова вызвать функцию setfooter ().

Запустите фрагмент, а затем на весь экран, чтобы продемонстрировать его.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Развернуть фрагмент

Sterner
источник
2

Простой js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Обновление № 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
fdrv
источник
1

Чтобы суммировать все это, просто помните одну вещь: все, кроме нижнего колонтитула, должно иметь min-height: 100%или немного меньше.

kshirish
источник
1

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

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
Фред К
источник
1

Основываясь на ответе Jek-fdrv , я добавил, .on('resize', function()чтобы убедиться, что он работает на каждом устройстве и каждом разрешении:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
iamchriswick
источник
1

Текущая версия начальной загрузки, похоже, больше не работает для этой функции. Если вы скачаете их пример sticky-footer-navbar и поместите большой объем контента в область основного тела, нижний колонтитул будет перемещен за нижнюю часть области просмотра. Это совсем не липко.

CJ Catalano
источник
1

Вот CSS-решение для полностью адаптивного липкого нижнего колонтитула переменной высоты.
Преимущество: нижний колонтитул допускает переменную высоту, поскольку высоту больше не нужно жестко кодировать в CSS.

Показать фрагмент кода

А вот и без префикса SCSS(для gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
дао
источник
1

Просто используйте flex! Обязательно используйте body и main в своем HTML, и это одно из лучших решений (если только вам не нужна поддержка IE9). Это не требует фиксированной высоты или подобия.

Это также рекомендуется для Материализации!

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}
Kentor
источник
0

в словах Haml & Sass все что нужно:

Хамл для app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass для app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

на основе http://getbootstrap.com/examples/sticky-footer-navbar/

equivalent8
источник
0

Если вы хотите использовать начальную загрузку в классах для нижнего колонтитула. Вы также должны написать немного JavaScript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

Это предотвратит перекрытие содержимого фиксированным нижним колонтитулом и отрегулирует padding-bottom когда пользователь изменит размер окна / экрана.

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

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

Это определенно не лучшее решение (из-за JS, которого можно было бы избежать), но оно работает без каких-либо проблем с наложением, его легко реализовать и адаптировать ( heightне жестко закодировано в CSS).

jmarceli
источник
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Развернуть фрагмент

GPAK
источник
Как это липко внизу?
Себастьян
0

Вот очень простой и чистый липкий нижний колонтитул, который вы можете использовать в начальной загрузке. Полностью отзывчивый!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Пример: демонстрация CodePen

Gothburz
источник
Это решение сместит строку нижнего колонтитула вправо при открытии модального бутстрапа из-за абсолютного позиционирования!
thethakuri
0

Использование flexbox- самый простой способ, который я нашел, от парней CSS-трюков . Это настоящий колонтитул, он работает, когда содержание составляет <100% страницы и> 100% страницы:

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

И CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

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

bustawin
источник
0

Вы можете просто попробовать добавить класс на панели навигации в нижнем колонтитуле:

navbar-fixed-bottom

Затем создайте CSS с именем custom.css и заполнение тела следующим образом.

body { padding-bottom: 70px; }
Икрам - Уд - Даула
источник