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

Question

[uib]

Я использую materializecss. И я хочу прижать footer к нижней части сайта но при этом его не фиксировать чтобы при скролле страницы footer не был зафиксирован и всегда просто оставался в нижней части сайта.

<header>
<nav class="indigo">
  <div class="nav-wrapper container">
    ....
  </div>
</nav>
</header>

<main>
...
</main>

<footer class="indigo">
  <div class="footer-copyright">
    <div class="white-text container center" >
      &copy;
      {{year | date: 'yyyy'}}
    </div>
  </div>
</footer>

Пробовал добавлять это но ничего не происходит:

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

Answer 1

[MiXei4]

Вроде работает ваш вариант - https://jsfiddle.net/b5rmtncq/

Comments

[uib]

странно но у меня не работает

[MiXei4]

header, main и footer непосредственные потомки body?

Answer 2

[Иван Дмитриев]

Данный вариант работает , скорее всего вам требуется проверить не переопределяет ли materialize css body и наследуется ли display:flex элементами header main footer.
Если что вот пример без materialize
https://jsfiddle.net/k2es6pwt/