Как сделать footer внизу страницы на экране с малым количеством информации?

Question

[Виталий]

Всем доброго дня.
Суть вот в чем, к примеру у меня есть небольшой сайт-визитка на 4 страницы, все по банальному, header, content, footer.
Но вот загвоздка, как сделать так чтоб на станице, к примеру с контактами, сделать так чтоб footer был внизу экрана при учете что на станице мало информации, footer просто идет за контентом, а нужно чтоб в таком случае был просто размещен в низу экрана (причем на всех типах экранов если это нужно будет).
Решаемо ли это?
P.S. Новые техники типа flex не подходят, нужна поддержка некоторых старых браузеров.
Наглядный пример того что у меня выходит:

Answer 1

[Negwereth]

lmgtfy.com/?q=footer+at+bottom

Comments

[Виталий]

google пользоваться умею) но решил воспользоваться умами знатоков, во избежание траты времени на прочтение лишнего.

Answer 2

[Виктор Таран]

все намного проще, для этого в дизайн закладывается широкий футер.

Answer 3

[iBird Rose]

https://jsfiddle.net/78ew73su/

Answer 4

[Александр]

Класс navbar-fixed-bottom раз уж вы пользуетесь bootstrap

Comments

[Виталий]

не подходит, но спасибо за реакцию на вопрос)

[Александр]

Виталий: тогда смотреть тут

Answer 5

[Максим Тарабрин]

Задаешь для body:
display: flex и flex-direction: column

А потом для блока контент задаешь flex: 1

Тогда у тебя контент будет расширяться при свободном пространстве.

Comments

[Виталий]

чет не то что нужно

[Максим Тарабрин]

Виталий: кстати для body задай
Justify-content: space-between

[Максим Тарабрин]

Будет лучше, если блоки футер, хедер и контент положить в один блок page. Задать width и height по 100% для боди и page. Для page задать display: flex и flex-direction: column.
Для блока content задать flex: 1

Загугли "прижать футбол к низу" и ищи метод с использованием flexbox

Answer 6

[Ivan Bogachev]

Как сделать footer внизу страницы... Решаемо ли это?

И в восьмой раз я приложу к ответу эту демку... Досчитаю до 13 и начну жаловаться на подобные вопросы.

Comments

[Виталий]

На что жаловаться то? Я вот когда получу то решение которое меня устроит сразу же удалю вопрос, но пока все толкают мне этот flex, а мне он не походит, так как нужно чтоб и некоторые старые браузеры поддерживали решение )))

[Ivan Bogachev]

так как нужно чтоб и некоторые старые браузеры поддерживали решение

В вопросе об этом ни слова. Было бы логично такое требование туда добавить (все толкают вас к флексу не потому, что вредные, а потому, что по умолчанию считают только IE11, максимум IE10 достойными полноценной поддержки - если нужны старые браузеры - это нужно уточнить).

[Виталий]

Понял, спасибо.
А вы могли б взглянуть на это: Почему не срабатывает js collapse от Bootstrap на iPad 2?

[Ivan Bogachev]

Виталий: не имею ipad под рукой, так что не подскажу с чем там проблема.

Answer 7

[Миша]

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

.container {
  display: table;
  height: 100%;
  width: 100%;
}

.content {
  display: table-row;
  height: 100%;
}

Демо на codepen