Materialize-css Sticky Footer in Angular

Question

Materialize-css sticky footer utility doesn't work 'out of the box' with Angular. Even with the modifications to the css file recommended by the documentation.

The documentation suggests the following classes should be edited as follows:

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

  main {
    flex: 1 0 auto;
  }

Answer 1

The solution is to add > app-root after body.

The edits should look like this:

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

main {
  flex: 1 0 auto;
}

These will need to be changed in the materialize.css file, and will need to be placed in styles.css.

The last step is to add <main> </main> around the body of your content.

I place it around the router outlet so my app.component.html looks like this:

<app-header></app-header>

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

<app-footer></app-footer>