Materialise-css Angular 中的粘性页脚

Question

Materialize-css 粘性页脚实用程序不适用于 'out of the box' 和 Angular。即使对文档推荐的 css 文件进行了修改。

文档建议将以下类编辑为：

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

  main {
    flex: 1 0 auto;
  }

Answer 1

解决方法是在body之后加上 > app-root。

编辑应该如下所示：

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

main {
  flex: 1 0 auto;
}

这些需要在materialize.css文件中更改，和需要放在styles.css.

最后一步是在内容正文周围添加 <main> </main>。

我把它放在路由器插座周围，所以我的 app.component.html 看起来像这样：

<app-header></app-header>

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

<app-footer></app-footer>

Materialize-css Sticky Footer in Angular