Как правильно позиционировать footer на сайте?

1,00
р.
На сайте есть header, content и footer блоки. У content на разных страницах разная высота, бывает что высота меньше чем body и тогда шапка находится не внизу страницы а выше. Как правильно позиционировать футер? Нужно ли устанавливать минимальную высоту для content чтобы прижать footer к низу? Хотя минимальную высоту я установить не могу, так как высота на разных устройствах разная. Как поступать в таких случаях?

Ответ
футер прижимается вниз путём его абсолютного позиционирования и вытягивания высоты родительских блоков: html, body и блока с классом .wrapper на 100%. При этом конкретному блоку .content необходимо задать нижний отступ, который равен или больше высоты футера, в противном случае последний закроет часть содержимого.


* { margin: 0 padding: 0 }
html, body { height: 100% }
.wrapper { position: relative min-height: 100% }
.content { padding-bottom: 90px }
.footer { position: absolute left: 0 bottom: 0 width: 100% height: 80px }

Text




Как-то так