it-swarm.com.ru

Twitter Bootstrap 3 Sticky Footer

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

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

193
Brad Fletcher

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

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

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

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

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

150
tkymtk

Вот метод, который добавляет липкий нижний колонтитул, который не требует никакого дополнительного 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>
50
anataliocs

В дополнение к 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 -->

Прямая трансляция
Редактировать вид

34
David Taiaroa

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

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

НТН

28
iMil

Вот упрощенный код 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;
}
27
Leniel Maccaferri

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

 /* 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;
}
10
zee

Ответ от ОП:

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

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

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

#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
Andi Giga

Простой js

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

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

Текущий (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>

2
Sterner

Я пишу свой упрощенный липкий код нижнего колонтитула с заполнением, используя 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
Fred K

Вот 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's 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
Andrei Gheorghiu

Основываясь на ответе 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
iamchriswick

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

1
CJ Catalano

Это было решено с помощью 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;
}
1
Konstantin Schubert

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

1
kshirish

Использование 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;
}

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

0
bustawin

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

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 Demo

0
Gothburz

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

navbar-fixed-bottom

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

body { padding-bottom: 70px; }
0
Ikram - Ud - Daula

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

0
jmarceli

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

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/

0
equivalent8

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

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

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

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

main {
    flex: 1 0 auto;
}
0
kentor