Как грамотно позиционировать footer?

Question

[AAGora]

Приветствую, коллеги! Подскажите, пожалуйста, как грамотно позиционировать блок footer в нижнюю часть страницы при условии, что блок main__content_top имеет высоту равную высоте экрана, а блок main__content_bottom располагается следом за ним? В свою очередь блоку main__content_bottom задается высота равная auto (в примере для наглядности указал значение 1400px).

https://codepen.io/AAGora/pen/OJbawvY?editors=1100

Дублирую код:

<header class="header"></header>
  <main class="main">
    <div class="main__content_top">
    </div>
    <div class="main__content_bottom">
    </div>
  </main>
  <footer class="footer"></footer>

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  position: absolute;
  top: 20px;
  z-index: 1;
  width: 100%;
  height: 100px;
  background: rgb(155, 178, 204);
}

.main {
  width: 100%;
}

.main__content_top {
  position: absolute;
  height: 100%;
  width: 100%;
  background: gray;
}

.main__content_bottom {
  position: absolute;
  top: 100%;
  height: 1400px;
  width: 100%;
  background: rgb(184, 140, 140);
}

.footer {
  width: 100%;
  height: 100px;
  background: rgb(108, 161, 129);
}

Comments

[Сергей delphinpro]

Грамотно — не использовать абсолюты без надобности. А здесь они нафиг не нужны, если нет доп. условий.

[AAGora]

Сергей delphinpro, Спасибо за пищу для размышления. Мне самому не нравится данная идея - использовать абсолюты. При этом по-другому сделать блок во всю высоту экрана не получается.

[Сергей delphinpro]

AAGora,

{
  height: 100vh;
}

[AAGora]

Сергей delphinpro, Как же все просто оказалось. Спасибо за помощь. Буду детальнее разбираться в единицах измерения!

[Даниил Попов]

AAGora, height: 100vh;  хороший вариант, но дает побочные эффекты в мобильных браузерах.
Лично я предпочитаю

html,
body {
  height: 100%;
}

и внутри контейнер, который растягивается флексом

Answer 1

[Даниил Попов]

Пример с процентами и флексами из моего комментария:
https://jsfiddle.net/groog/o7428ged/18/

А также статья где описаны различия между vh, vw и %
https://front-end.su/2015/10/07/viewport-units-vs-...