Как сделать, чтобы футер всегда был снизу?

Question

[DTX]

Даже если контента не хватает на заполнение всей страницы.
При этом у футера динамическая высота.

Использовал flex с вертиакальным выравниванием, но в ie (даже в 11) всё очень плохо.

Answer 1

[Grigory S.]

css-live.ru/articles/uporyadochivanie-bagov-krossb...

Comments

[Юрий]

ответы еще прикольнее чем вопрос ;)

[Grigory S.]

Юрий: какой вопрос такой ответ

[DTX]

Grigory S.: вроде получилось... Спасибо!

Answer 2

[Just_Andrew]

Ну как вариант, если ничего лучше не найдется

html,
body {
  height: 100%;
}
.wrapper {
  display: table;
  height: 100%;
}
.content {
  display: table-row;
  height: 100%;
}

Comments

[DTX]

Не пробовал, но выглядит норм.
Будет работать?

Answer 3

[Edward]

Footer Sticky (absolute)
Footer Sticky (table)

Answer 4

[Иван]

position: absolute;
bottom: 0;

У блока с контентом отступ снизу.

Comments

[DTX]

Какой отступ? Высота то не фиксированная у него

Answer 5

[dom1n1k]

гуглить по словам "sticky footer" - найдется множество материалов.
в частности, на CSS Tricks (кажется там) была исчерпывающая статья с разбором 5-6 вариантов решения.

Comments

[DTX]

https://css-tricks.com/couple-takes-sticky-footer/
Эта?

Ничего подходящего не нашёл.. Кроме флекса ещё grid предлагают =\

Answer 6

[zooks]

Гуглить sticky footer flex.

Comments

[DTX]

Так я же говорю, что у меня и так флекс был.

[zooks]

DTX: в случае Flex не нужно вертикальное выравнивание.

[zooks]

DTX: в IE 10+ он работает нормально.

[DTX]

zooks: я про flex-direction.

Пример из певой ссылк гугла не работает в IE11:
codepen.io/anon/pen/NRBXjW

i.imgur.com/TtJS6Wq.png