Materialize CSS - Sticky Footer
If you use this footer under Angular component, probably your <header> <main> <footer> tags wrapped by <app-root> tag. In this case You should specify your css like below :
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
If you look at the source of the example page you can see how they are doing it: http://materializecss.com/footer.html
Structure your HTML like the example below:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
You're probably not using the <main> tag
Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags:
<header>,<main>,<footer>