@uib

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

Я использую 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;
  }
  • Вопрос задан
  • 168 просмотров
Решения вопроса 2
MiXei4
@MiXei4
Вроде работает ваш вариант - https://jsfiddle.net/b5rmtncq/
Ответ написан
wolf1848
@wolf1848
Искатель
Данный вариант работает , скорее всего вам требуется проверить не переопределяет ли materialize css body и наследуется ли display:flex элементами header main footer.
Если что вот пример без materialize
https://jsfiddle.net/k2es6pwt/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы