Как прижать футер к низу страницы | CSS

Для большинства предложенных решений обязательным условием является фиксированный footer. А как быть сайтам с резиновой вёрсткой? Ответ дал Philip Walton 

<style>
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* высота веб-страницы больше или равна высоте окна браузера */
  margin: 0;
}
main {
  flex: 1;  /* если содержимое body меньше высоты окна, то main будет растянут до нужной величины */
}
</style>

<body>
  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>
</body>

Я так считаю: не прижатый к низу страницы футер смотрится некрасиво, но он не является критической ошибкой, после которой невозможно пользоваться сайтом. Поэтому можно ограничится браузерами, поддерживающими display: flex; и vh.

в f t
наверх ↑

5 комментариев:

alinzza
у меня не сработало (
NMitra
У вас такая длинная боковая панель, что проблемы не должно возникать
Миттельшпиль
Не будет работать в IE(
NMitra
Здесь есть продолжение http://css-live.ru/articles/uporyadochivanie-bagov-krossbrauzernosti-flexbox.html для IE 10-11
NMitra
Ещё https://css-tricks.com/couple-takes-sticky-footer/