Материализовать - css липкий нижний колонтитул в Angular

Question

Materialize- css Утилита липкого нижнего колонтитула не работает "из коробки" с Angular. Даже с модификациями файла css, рекомендованными документацией.

В документации предлагается отредактировать следующие классы следующим образом:

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

  main {
    flex: 1 0 auto;
  }

Answer 1

Решение состоит в том, чтобы добавить > app-root после body.

Изменения должны выглядеть следующим образом:

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

main {
  flex: 1 0 auto;
}

Их нужно будет изменить в материализовать . css файл, и нужно будет поместить в стили. css.

Последний шаг - добавить <main> </main> вокруг тело вашего контента.

Я помещаю его вокруг розетки маршрутизатора, чтобы мой app.component. html выглядел так:

<app-header></app-header>

<main>
  <router-outlet></router-outlet>
</main>

<app-footer></app-footer>