Twitter Bootstrap 3 Sticky Footer

204

Я використовую рамки завантажувального завантаження ще досить давно, і вони нещодавно оновились до версії 3!

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

html  css  twitter-bootstrap  twitter-bootstrap-3 
— Бред Флетчер
джерело
31
офіційний приклад: getbootstrap.com/examples/sticky-footer-navbar
— ptim
3
@memeLab, чому в офіційному прикладі немає нічого про межу корпусу: -60px? Або я сумував ...?
— подарунки
Додано єдине рішення CSS, що дозволяє змінювати висоту для липкого нижнього колонтитулу. Тут пов'язано це як нову відповідь, що знаходиться внизу сторінки.
— дао

Відповіді:

193

просто додайте клас навігації з фіксованим дном у колонтитул.

<div class="footer navbar-fixed-bottom">
— Джон
джерело
32
це не те саме, що липкий колонтитул
— Юра Омельчук
3
Якщо у вас є колонтитул і колонтитул, ви втрачаєте занадто багато місця на мобільному пристрої.
— strattonn
4
@strattonn - це те, для чого потрібні медіа-запити
— Jacob Raccuia
20
Це прекрасно працює, якщо для сторінки не потрібен прокрутка. Але колонтитул перекривається більше вмісту сторінки. Будь-яке рішення щодо цього? Дякую!
— Xplora
1
не впевнений у проблемі перекриття, але чи додавання поля / накладки не вирішує проблему?
— Jon
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 у вихідному коді прикладу липкого колонтитулу .

<!-- 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 в офіційному прикладі "нижнього колонтитулу" тепер сильно відрізняється від описаного тут, наприклад, жоден "wrap" div не використовується більше.
— Ян Ян
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>
— анаталіоки
джерело
4
Дуже приємно і швидко. Може бути чуйним. Але потрібно додати деякий додатковий простір у нижній частині вмісту сторінки, щоб його не приховали колонтитули. Простір повинен мати висоту, рівну висоті нижнього колонтитулу. Чи можете ви показати, як найкраще це зробити? BTW "не вимагає 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 -->

Живий вигляд
Редагувати подання

— Девід Таяроа
джерело
Якщо вміст сторінки перевищує доступний дисплей, нижній колонтитул буде висунутий вниз. Я хотів би, щоб колонтитул справді приклеївся до дна (наприклад, navbar-
— fix
Ей @delavnog, чи буде щось подібне працювати для вас? codepen.io/panchroma/pen/wMXWpY . Єдині важливі для вас біти - це HTML у рядку 647 та CSS
— David Taiaroa
@delavnog, та сама ідея з мінімальним вмістом на сторінці codepen.io/panchroma/pen/JGZKqy
— David
Дякую, це чудово! Тепер, якби мені вдалося встановити головний діл по центру вертикально між навісом і колонтитулом, це було б приголомшливо! Відредагував ваш codepen: codepen.io/anon/pen/rxKMaW (я повинен був додати поле до корпусу, тому що навіс з'їдає верхню частину вмісту)
— blueFast
@delavnog, ось початок, якщо основний корпус не надто високий. Більше роботи знадобиться, хоча для більш тривалого вмісту: codepen.io/panchroma/pen/vLrXMq
— David
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

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

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

HTH

— iMil
джерело
Мені подобається простота та ефективність вашої відповіді, яка, до речі, є розумною відповіддю. Багато відповідей на одне й те саме питання рясніють запитами та складними матеріалами. Спасибі людина.
— digitai
1
Її половина рішення, вам все ж потрібно подбати про перекриття вмісту на вашій сторінці, якщо ви зміните його розмір.
— Baldráni
@ Baldráni Немає повного рішення, перекриття спрацьовують добре, якщо ви використовуєте рядок Bootstrap і 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;
}
— zee
джерело
4
Це не гарне рішення, оскільки колонтитул фіксований, це означає, що він перекриває вміст сторінки (якщо такий є). Спробуйте додати кілька some text<br>рядків перед колонтитулом та розмір вниз у вікні.
— jmarceli
@ user2041318: так, це жахливо ... дякую, що вказав на це.
— Себастьян
Це було виправлено відповідно до коментаря jmarceli. Нижній колонтитул більше не закріплено.
— zee
3

Клейкий приклад для мене не працює. Моє рішення:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— Анді Гіга
джерело
Простий, добрий старомодний CSS. Робота виконана. Мені здається цікавим, наскільки сумнівні відповіді з більш високим рейтингом. Хіба Bootstrap не повинен полегшити наше життя? 😂
— Кал
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 Sticky Footer (Фіксований розмір) виглядає так:

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, щоб отримати висоту колонтитула та встановити поле тілаBottom. Це робиться за допомогою функції 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

Прості 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%або трохи менше.

— кширіш
джерело
1

Я пишу свій спрощений липкий код нижнього колонтитулу з накладкою, використовуючи МЕНШЕ. Ця відповідь, ймовірно, поза темою, оскільки в цьому питанні не йдеться про прокладки, тому, якщо вам цікаво, перегляньте цю публікацію для отримання більш детальної інформації.

@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");
    }
});
— ямчрісвік
джерело
1

Поточна версія завантажувальної програми, схоже, вже не працює для цієї функції. Якщо ви завантажите їхній приклад з наклейкою нижнього колонтитула та розмістіть велику кількість вмісту в основній області корпусу, нижній колонтитул пересунеться вниз. Це зовсім не липко.

— 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;
}
— кентор
джерело
0

у словах Haml & Sass все необхідне:

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

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Сас для 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/

— еквівалент8
джерело
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коли користувач змінює розмір вікна / екрана.

У вищезазначеному сценарії я припускав, що колонтитул розміщується безпосередньо всередині тега 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>
Розгорніть фрагмент

— Гпак
джерело
Як ця клейка внизу?
— Себастьян
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

— Готбург
джерело
Це рішення змістить смугу нижнього колонтитула вправо при відкритті режиму завантаження через абсолютне позиціонування!
— 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;
}

Зауважте, що це завантажувальний-агностичний, тому він працює з завантажувальним і без нього.

— Буставін
джерело
0

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

navbar-fixed-bottom

Потім створіть CSS з назвою custom.css та накладки на тілі, як це ..

body { padding-bottom: 70px; }
— Ікрам - Уд - Даула
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.