Сделать нижний колонтитул в нижней части страницы с помощью Twitter Bootstrap

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

Я поместил все свои страницы в "держатель"

#holder {
  min-height: 100%;
  position:relative;
}

И затем использовал следующий CSS для моего нижнего колонтитула

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

html для моего нижнего колонтитула

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:[email protected]</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Я хотел бы сохранить нижнюю часть жидкости.

Ответ 1

Как уже говорилось в комментариях, вы основали свой код на этом решении: fooobar.com/questions/34491/...

Одной из ключевых частей этого решения является добавление height: 100% в html, body, поэтому элемент #footer имеет базовую высоту для работы - это отсутствует в вашем коде:

html,body{
    height: 100%
}

Вы также обнаружите, что у вас возникнут проблемы с использованием bottom: -50px, так как это приведет к тому, что ваш контент окажется под сгибом, когда контента недостаточно. Вам нужно будет добавить margin-bottom: 50px к последнему элементу перед #footer.

Ответ 2

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

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

Ответ 3

http://bootstrapfooter.codeplex.com/

Это должно решить вашу проблему.

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS

html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}

Ответ 4

Вот пример использования css3:

CSS

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle

Ответ 5

Используйте классы bootstrap в своих интересах. navbar-static-bottom оставляет его внизу.

<div class="navbar-static-bottom" id="footer"></div>

Ответ 6

Большая часть вышеупомянутого решения не сработала для меня. Однако ниже данное решение работает просто отлично:

<div class="fixed-bottom">...</div>

Источник

Ответ 7

Это может быть легко достигнуто с помощью CSS flex. Имея HTML разметку следующим образом:

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

Следует использовать следующий CSS:

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

Здесь CodePen, чтобы играть с: https://codepen.io/webdevchars/pen/GPBqWZ