Как прижать футер переменной высоты?

Question

[Вадим Иванов]

Ребят помогите)
Нужно прижать футер к низу окна браузера.
Высота футера неизвестна.

Нашел решение с эмуляцией таблицы:

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

Можно использовать такое, или есть еще решение без JS?
---------------------------
IE8+
Без Javascript

Comments

[Денис Инешин]

А чем вас это решение не устраивает?

[Вадим Иванов]

Денис Инешин: хотелось бы узнать, есть ли подводные камни у этого решения, или можно юзать без проблем.

[Денис Инешин]

DyNaMiTek: CanIUse - проверяйте всё там. Как видите, IE8 поддерживает на ура.

[Вадим Иванов]

Денис Инешин: хорошо, буду пробовать)

Answer 1

[Сергей Горячев]

Средствами CSS вряд ли. Скорей всего только через JS.

Способ, описанный в статье от Антон Запевалов не совсем оправдал себя при уменьшении экрана.
Да, https://yadi.sk/i/7Z7q6MmgkFvfk уменьшил нарочно меньше допустимого, но думаю, что подвал такой, как в примере, это скорей исключение из правил, чем классический подвал. Обычно инфы больше там.
Это касается именно футера переменной высоты. Если высота фиксированная, то обойдется норм.

А ваш пример с таблицами это как-то страшно. Это делается и на блоках, даже корректнее.

В принципе, тоже самое, но без таблиц вполне работает.

html, body {
height: 100%;
}
.wrapper {
height: 100%;
}
.content {
height: 100%;
}

Comments

[Вадим Иванов]

Почему страшно с display: table; ?)

[Сергей Горячев]

DyNaMiTek: точно не опишу ситуацию, но у меня была проблема с position и z-index, применяемым к внутритабличным элементам. Возможно, проблема была решаемая, но я тогда навсегда отказался от display table, table-cell, table-row для блочных элементов, а тем более элементов страницы.