Angular中的Materialize-css Sticky Footer

【问题标题】：Materialize-css Sticky Footer in AngularAngular中的Materialize-css Sticky Footer
【发布时间】：2020-07-08 20:01:32
【问题描述】：

Materialize-css 粘性页脚实用程序不能在 Angular 中“开箱即用”。即使对文档推荐的 css 文件进行了修改。

文档建议应按如下方式编辑以下类：

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

  main {
    flex: 1 0 auto;
  }

【问题讨论】：

【解决方案1】：

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

编辑应如下所示：

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

main {
  flex: 1 0 auto;
}

这些需要在 materialize.css 文件中进行更改，并且需要放在 styles.css 中。 p>

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

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

<app-header></app-header>

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

<app-footer></app-footer>

【讨论】：