Как адаптивно и кросбраузерно прижать футер к низу экрана?

Question

[Semmy_99]

Здравствуйте.

Подскажите пожалуйста как с поддержкой андроида 4.2 , т.е. кроссбраузерно прижать футер к низу экрана ?

Почитал варианты что выдал поиск, но так и не нашёл подходящий.

Есть небольшие нюансы :
- сайт адаптивный и эл-ты могут добавляться на него динамически.

Вариант с flex'ами отпадает , т.к. нет поддержки.

Вариант с тем чтобы абсолютно позиционировать футер , тоже не очень подходит. При сужении экрана все едет и учитывая что эл-ты добавляются динамически , нужно будет постоянно следить за этим.
Есть ли ещё какие то варианты ?

Answer 1

[mr_dev1l]

Почему отпадает flex? Вот вам совместимость. так что flex сейчас самый правильный и кроссбраузерный вариант

Comments

[#FFFFFF]

на ie11 работать не будет, у нас в компании, например, его еще поддерживают

[Игорь Воронов]

Виктория, сами по себе флексы в ie11 работают, просто есть некоторые баги, которые можно обойти. По сему, видимо, и считается, что в ie11 поддержка flex частичная. Вот здесь описаны многие кейсы. У меня лично не было особых проблем с флексами в ie11, там с другим достаточно головной боли :)

Answer 2

[Андрей]

<div class="wrapper">
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

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

Comments

[Semmy_99]

Этот вариант подразумевает что все дочерние элементы wrapper имеют display table row за исключением фунтов ?

[Андрей]

Нет, конечно. .content растягивается на всю высоту, а .footer по содержимому или с помощью height

Answer 3

[65536]

Пережил дофлексовые времена с вот этим csstemplater.com

Answer 4

[Atlllantis]

position: fixed

Answer 5

[xmoonlight]

вот пример

Answer 6

[Одиночка Айс]

https://codepen.io/anon/pen/vdRvqq

В классе container может быть любой контент

Answer 7

[Анна]

Через минимальную высоту использую функцию calc() и значения vh https://jsfiddle.net/wey7kpbx/2/