Bootstrap 3 Снимите нижний колонтитул снизу. не зафиксировано

Я использую Bootstrap 3 для сайта, который я проектирую.

Я хочу иметь нижний колонтитул, подобный этому образцу. Пример

Обратите внимание, что я не хочу, чтобы он был FIXED, поэтому bootstrap navbar-fixed-bottom не решает мою проблему. Я просто хочу, чтобы он всегда находился в нижней части содержимого, а также был отзывчивым.

Любой гид будет очень оценен.

EDIT:

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

Это то, что у меня теперь для моего навигатора

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

ОТВЕТЫ

Ответ 1

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

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE. Новая версия Bootstrap демонстрирует, как добавить липкий нижний колонтитул без добавления обертки. Пожалуйста, см. Ответ Jboy Flaga для получения более подробной информации.

Ответ 2

Здесь есть упрощенное решение от bootstrap (где вам не нужно создавать новый класс): http://getbootstrap.com/examples/sticky-footer-navbar/

Когда вы откроете эту страницу, щелкните правой кнопкой мыши на браузере и "Просмотр источника" и откройте файл sticky-footer-navbar.css(http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)

вы можете видеть, что вам нужен только этот 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;
}

для этого HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

Ответ 3

UPDATE: это не отвечает на вопрос полностью, но другие могут найти это полезным.

Это HTML для вашего быстрого нижнего колонтитула

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

Для CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

ПРИМЕЧАНИЕ.. Во время публикации для этого вопроса вышеуказанные строки кода не подталкивают нижний колонтитул ниже содержимого страницы; но он будет держать ваш нижний колонтитул от ползания вверх по странице, когда на странице мало контента. Пример, который подталкивает нижний колонтитул ниже содержимого страницы, смотрите здесь http://getbootstrap.com/examples/sticky-footer/

Ответ 4

<footer class="row">
    <div class="panel-footer text-center">
<p>add text</p>
    </div>
  </footer>

Ответ 5

Гален Гидман опубликовал действительно хорошее решение проблемы чувствительного липкого нижнего колонтитула, который не имеет фиксированной высоты. Вы можете найти его полное решение в своем блоге: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

Ответ 6

используйте flexbox, как вы можете использовать его в своем распоряжении. Решение, предлагаемое bootstrap 4, все еще содержит контент перекрытия в гибкой компоновке, например: он будет разбит на мобильный вид, я нахожусь в наиболее аккуратном трюке, чтобы использовать демонстрацию flexbox, представленную здесь: (https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) таким образом нам не нужно иметь дело с проблемой фиксированной высоты, которая является устаревшим решением к настоящему времени... это решение работает для загрузки 3 и 4 в зависимости от того, что вы используете.

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

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

.Site-content {
  flex: 1;
}

Ответ 7

Этот метод использует минимальную разметку. Просто поместите весь свой контент в .wrapper, у которого есть нижний дно и отрицательное нижнее поле, равное высоте нижнего колонтитула (в моем примере 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

Ответ 8

Для Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

Ответ 9

Для людей, которые все еще борются, и ответное решение не работает так, как вы хотите, это самое простое решение, которое я нашел.

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

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Это и работает, хорошо.

Ответ 10

Ни одно из этих решений не сработало для меня отлично, потому что я использовал navbar-inverse class в своем нижнем колонтитуле. Но я получил решение, которое работало, и Javascript-free. Используется Chrome, чтобы помочь в формировании медиа-запросов. Высота нижнего колонтитула изменяется по мере изменения размера экрана, поэтому вы должны обратить внимание на это и соответствующим образом отрегулировать. Содержимое нижнего колонтитула (я устанавливаю id = "нижний колонтитул" для определения моего содержимого) должен использовать postion = absolute и bottom = 0, чтобы сохранить его внизу. Также ширина: 100%. Вот мой CSS с медиа-запросами. Вам нужно будет настроить минимальную ширину и максимальную ширину и добавить или удалить некоторые элементы:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}

Ответ 11

Основной недостаток решений выше - они имеют фиксированную высоту для нижнего колонтитула.
И это просто не режет его в реальном мире, где люди используют множество устройств и имеют эту плохую привычку вращать их, когда вы меньше всего этого ожидаете, и ** Poof! ** идет содержание вашей страницы за нижним колонтитулом!

В реальном мире вам нужна функция, которая вычисляет высоту нижнего колонтитула и динамически настраивает содержимое страницы padding-bottom для размещения этой высоты. И вам нужно запустить эту крошечную функцию на страницах load и resize событиях, а также на нижнем колонтитуле DOMSubtreeModified (на всякий случай, если ваш нижний колонтитул динамически обновляется асинхронно или содержит анимированные элементы, которые изменяют размер при взаимодействии).

Здесь приведено доказательство концепции с использованием jQuery v3.0.0 и Bootstrap v4-alpha, но нет причин, по которым он не должен работать с более низкими версиями каждого из них.

jQuery(document).ready(function( $ ) {
  $.fn.accomodateFooter = function(){
    var footerHeight = $('footer').outerHeight();
    $(this).css({'padding-bottom':footerHeight+'px'});
  }
  // accomodate footer after its html has changed
  $('footer').on('DOMSubtreeModified', function(){
    $('body').accomodateFooter();
  })
  // accomodate footer on page load and resize
  $(window).on('load resize', function(){
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />',{
      text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
    .append($('<hr />'));
  }
});
body {
  min-height: 100vh;
  position: relative;
  padding-top: 54px;
}
footer {
  background-color: rgba(0,0,0,.65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}
footer hr {
  border-top: 1px solid rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(255,255,255,.21);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
      </div>
    </div>
<footer>I am a footer with dynamic content.
  <hr />

Ответ 12

Или это

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>