Как прижать footer к низу

Question

body {
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #000;
}

<body>
  <div class="header"></div>
  <div class="nav"></div>
  <div class="news"></div>
  <div class="footer"></div>
</body>

Answer 1

например так:

body {
    min-height: 100vh;
}

Answer 2

Попробовать заменить absolute на fixed

и добавить body margin 0

body {
  position: relative;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #000;
}

Answer 3

Допустим, наша страница на уровне футера делится на 3 блока:

<header>шапка</header>
<main>основное содержание</main>
<footer>футер</footer>

Тогда родительскому контейнеру, пусть это будет див с классов .wrapper, мы задаём:

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}