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

69

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

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

#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
    ну, абсолютная позиция вашего нижнего колонтитула полностью зависит от размера контейнера. Поэтому, если в контейнере нет содержимого, оно, вероятно, заканчивается где-то посередине страницы, и вы размещаете нижний колонтитул на 50 пикселей ниже.
  • 0
    спасибо за ответ, что бы решить эту проблему?
Показать ещё 5 комментариев
Теги:

7 ответов

38
Лучший ответ

Как уже говорилось в комментариях, вы основали свой код на этом решении: https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol

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

html,body{
    height: 100%
}

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

Поделиться
  • 0
    Большое спасибо, я думал, что HTML, рост был установлен, кажется, это не так, изменил дно также и вуаля. еще раз спасибо
  • 0
    извините, чтобы спросить еще раз, но теперь я заметил, что когда область просмотра уменьшается, чтобы сказать, что размер iphone текст нижнего колонтитула перекрывается содержанием? есть идеи?
Показать ещё 5 комментариев
81

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

<div class="footer navbar-fixed-bottom">
Поделиться
  • 6
    Это создало замороженный нижний колонтитул, с прокруткой контента под ним. Я что-то пропустил? Спасибо.
  • 0
    Это заставляет нижний колонтитул придерживаться нижней части экрана, если это то, что вы подразумеваете под «замороженным». На маленьком экране будет отображаться нижний колонтитул, даже если содержимое пересекается. Зависит от того, хотите ли вы всегда показывать нижний колонтитул
Показать ещё 3 комментария
8

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;
}
Поделиться
  • 0
    спасибо, что делает @renderbody (), я пробовал это решение раньше, и я действительно выводил @renderbody () в виде html?
  • 0
    Игнорируйте эту часть - это просто функция, которая вызывает содержимое тела из других элементов управления.
Показать ещё 2 комментария
6

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

<div class="navbar-static-bottom" id="footer"></div>
Поделиться
6

Вот пример использования 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

Поделиться
  • 0
    Фантастическое использование calc. К сожалению, в 2017 году все еще существует проблема с пользовательскими сайтами, которые используют некоторые функции начальной загрузки.
4

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

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

Источник

Поделиться
  • 0
    Работает, но перезаписывает содержимое
0

Это может быть легко достигнуто с помощью 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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню