Sticky footer in Angular 2 Material

Question

I have been searching and searching for about 3 hours now because I didn\'t want to have to ask, but how can I keep a \'footer\' variable at the bottom but not like fixed at the

Answer 1

Here is a solution in few lines:

app.component.html:

     // your header
    

         // your content
    
     // your footer

styles.css:

html, body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}

Another alternative if you prefer to fill the footer instead of your content:

app.component.html:

     // your header
     // your content
     // your footer

styles.css:

html, body {
    height: 100%;
}