Angular 中的 Materialize-css 粘性页脚

Question

Materialize-css 粘性页脚实用程序无法与 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.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 文件中进行更改，并且需要放在styles.css中。

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

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

<app-header></app-header>

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

<app-footer></app-footer>