Бутстрап 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;
}
11 157
html css twitter-bootstrap footer

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/

когда вы открываете эту страницу, щелкните правой кнопкой мыши на браузере и "просмотр источника" и откройте липкий нижний колонтитул-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

обновление: это не дает прямого ответа на вопрос в целом, но другие могут найти это полезным.

это 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, все еще охотится за контентом перекрытия в отзывчивом макете, например: он сломается в мобильном представлении, я сталкиваюсь с самым аккуратным трюком - использовать демонстрацию решения 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 с медиа-запросами. Вам нужно будет настроить min-width и max-width и добавить или удалить некоторые элементы:

#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