Как прижать футер к низу страницы в bootstrap 3 стандартными средствами bootstrap?

Question

[Роман Денискин]

Добрый вечер друзья! Требуется прижать футер к низу таким образом, чтобы при контенте он не выезжал на контент, а при отсутствии был прижат к низу браузера. Как это сделать обычными средствами я знаю. Вот ссылка на сайт на котором реализован подобный футер (чтобы увидеть работу - удалите контент в инспекторе элементов). Есть ли подобная возможность в bootstrap-3 которая реализовывалась бы "красиво", т.е. без дополнительных пустых div, без обёрток контента и т.д.? Если да - буду благодарен за информацию, если нет - подскажите способ с минимальными потерями для структуры это реализовать. В сайте выше для реализации футера контент обёрнут в обёртку, за ней пустой div со свойствами и обёртка самого футера. Так же к body и html применены свойства height: 100%. Мне такой вариант кажется не лучшим решением (если я не прав, пожалуйста поправьте). Вот сайт на котором хочу реализовать это.

Answer 1

[Идель Гизатуллин]

Добавь в стили этот код:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Тут укажи высоту футера */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Тут укажи высоту футера */
  height: 60px;
  background-color: #f5f5f5;
}

Смотри пример.

Comments

[Роман Денискин]

Большое спасибо. Правда при добавлении не заработало пока, но вы скинули очень полезный пример. Пока получилось так: find-out.org/fo_verstka

[Роман Денискин]

Разобрался, футер прижат, только появляется полоса вертикальной прокрутки. Как от неё избавится не подскажите?

[Идель Гизатуллин]

Я прошел по ссылке find-out.org/fo_verstka. Не вижу вертикальную прокрутку. Уже справился?)

[Роман Денискин]

Идель Гизатуллин: да. Большое спасибо за ссылку, очень помогла)

[Идель Гизатуллин]

Роман Денискин: :)