Bootstrap 3 флеш нижний колонтитул в нижней части. неопределенный

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

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

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

любой гид будет очень признателен.

EDIT:

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

это то, что у меня теперь есть для моего navbar

<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;
}
157
css footer html twitter-bootstrap

11 ответов

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

в CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's 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>

обновление: новая версия Bootstrap демонстрирует, как добавить липкий нижний колонтитул без добавления обертки. Более подробную информацию см. В ответе Jboy Flaga.

116

здесь есть упрощенное решение от 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>
291

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/

12

используйте flexbox, как вы можете использовать его в своем распоряжении. Решение, предлагаемое bootstrap 4, все еще охотится за контентом перекрытия в отзывчивом макете, e.g: он сломается в мобильном представлении, я сталкиваюсь с самым аккуратным трюком - использовать демонстрацию решения flexbox, показанную здесь: (https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) таким образом, нам не нужно иметь дело с проблемой фиксированной высоты, которая является устаревшим решением...это решение работает для bootstrap 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;
}
6

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

оберните основное содержимое и назначьте ему минимальную высоту просмотра. Отрегулируйте 60 на любое значение, необходимое вашему стилю.

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

Это так, и он работает довольно хорошо.

6

Гален Гидман опубликовал действительно хорошее решение проблемы отзывчивого липкого нижнего колонтитула, который не имеет фиксированной высоты. Вы можете найти его полное решение в его блоге: 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%; }
4

этот метод использует минимальной наценкой. Просто поместите все материалы в .обертка, которая имеет заполнение-дно и отрицательное поле-дно, равное высоте нижнего колонтитула (в моем примере 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>
2

Для Bootstrap:

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

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

в реальном мире, вам нужна функция, которая вычисляет высоту футера и динамически корректирует странице контент 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's 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 />

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

Примечание: я специально завернул $([selector]).accomodateFooter() как плагин jQuery, поэтому он может быть запущен на любом элементе DOM, так как в большинстве макетов это не $('body') ' s bottom-padding это требует настройки, но некоторый элемент обертки страницы с position:relative (обычно Родительский footer).

2

ни одно из этих решений не сработало для меня идеально, потому что я использовал класс navbar-inverse в своем нижнем колонтитуле. Но я получил решение, которое работало и без Javascript. Используется Chrome для формирования медиа-запросов. Высота нижнего колонтитула изменяется по мере изменения размера экрана, поэтому вы должны обратить на это внимание и соответствующим образом настроить. Ваш контент нижнего колонтитула (я установил id="нижний колонтитул", чтобы определить мой контент) должен использовать postion=absolute и bottom=0, чтобы сохранить его внизу. Также width: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; 
    }
}
1

или это

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