Twitter Bootstrap 3 Sticky Footer

184

Я уже давно использую платформу bootstrap twitter, и они недавно обновились до версии 3!

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

  • 29
    официальный пример: getbootstrap.com/examples/sticky-footer-navbar
  • 3
    @memeLab, почему в официальном примере ничего не говорится о поле margin-bottom: -60px? Или я это пропустил ...?
Показать ещё 1 комментарий
Теги:
twitter-bootstrap-3

25 ответов

171

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

<div class="footer navbar-fixed-bottom">
Поделиться
  • 30
    это не то же самое, что липкий нижний колонтитул
  • 3
    Если у вас есть верхний и нижний колонтитулы, вы теряете слишком много места на мобильном устройстве.
Показать ещё 3 комментария
146

Ссылаясь на официальный пример липкого нижнего колонтитула 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 в исходном коде липкого нижнего колонтитула.

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

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

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

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

Пример здесь: Легкий липкий нижний колонтитул

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

<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>
Поделиться
  • 3
    Очень красиво и быстро. Может быть отзывчивым. Но необходимо добавить дополнительное пространство внизу содержимого страницы, чтобы оно не скрывалось нижним колонтитулом. Пространство должно иметь высоту, равную высоте нижнего колонтитула. Можете ли вы показать, как лучше всего это сделать? Кстати, "не требует CSS" технически неправильно. Это должно быть «не требует никаких дополнительных CSS, кроме классов Bootstrap» .
  • 1
    Мне нравится, что это использует то, что существует в начальной загрузке. Я не мог заставить другие главные ответы работать, но вставил это в мою страницу и bam, липкий нижний колонтитул. Спасибо!
35

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

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

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

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

Просмотр в реальном времени
Изменить вид

Поделиться
  • 0
    Если содержимое страницы больше доступного дисплея, нижний колонтитул будет сдвинут вниз. Я бы хотел, чтобы нижний колонтитул был действительно привязан к нижней части (например, navbar-fixed-bottom)
  • 0
    эй @delavnog, что-нибудь подобное сработает для тебя? codepen.io/panchroma/pen/wMXWpY . Единственные важные для вас биты - это HTML-код в строке 647 и CSS.
Показать ещё 6 комментариев
29

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

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

НТН

Поделиться
  • 0
    Мне нравится простота и эффективность вашего ответа, который, кстати, является разумным ответом. Многие ответы на одну и ту же проблему полны jquery и сложных вещей. Спасибо чувак.
  • 1
    Это половина решения, вам все равно нужно позаботиться о наложении контента на вашей странице, если вы измените его размер.
Показать ещё 2 комментария
26

Здесь 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
    Идеальное решение. Это то, что я искал.
  • 0
    К сожалению, этот нижний колонтитул имеет фиксированный размер. Иногда, когда нижний колонтитул является динамическим, он может быть больше или меньше его высоты в CSS.
9

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

 /* 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> перед нижним колонтитулом и уменьшить размер окна.
  • 0
    @ user2041318: да, это ужасно ... спасибо за указание на это.
Показать ещё 1 комментарий
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 пикселей высотой, он будет охватывать содержимое вашей страницы.

Сделайте гибким: удалите край тела и высоту нижнего колонтитула. Затем добавьте 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>
Поделиться
2

Ответ OP:

Добавьте это в свой файл 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 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;
  }
}
Поделиться
2

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

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
Поделиться
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>
Поделиться
1

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

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}
body > * {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
body > nav + .container {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}



/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
  padding: 50px 0 0;
  margin: 0;
}
footer {
  background-color: #f8f8f8; 
  padding: 15px 0 5px; 
  border-top: 1px solid #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>

     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Responsive sticky footer of any height</h1>
      </div>
      <p class="lead">You can have a sticky footer of any height using this CSS. It also fully responsive, no JavaScript needed.</p>
      
    </div>

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
Поделиться
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");
    }
});
Поделиться
1

Простой js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}
Поделиться
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

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

Поделиться
0

Это решение было разрешено flexbox, раз и навсегда:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

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

.Site-content {
  flex: 1;
}
Поделиться
0

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

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

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

main {
    flex: 1 0 auto;
}
Поделиться
0

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

Обратите внимание, что это bootstrap-agnostic, поэтому он работает с бутстрапом и без него.

Поделиться
0

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

Поделиться
0

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

navbar-fixed-bottom

Затем создайте CSS с именем custom.css и тегом, например.

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

Поделиться
  • 0
    Это решение сместит строку нижнего колонтитула вправо при открытии модального бутстрапа из-за абсолютного позиционирования!
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>
Поделиться
  • 0
    Как это липко внизу?
0

Если вы хотите использовать bootstrap build в классах для нижнего колонтитула. Вы также должны написать 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, когда пользователь изменит размер окна/экрана.

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

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

Поделиться
0

в словах Хамла и Сасса все, что необходимо:

Haml для 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/

Поделиться

Ещё вопросы

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