Sticky footer in Angular 2 Material

An approach that uses Flexbox:

When we utilize Flexbox we can get a cleaner solution. Also my solution will cover that the first component of your page should take 100% of the height. This is often needed to position elements appropriately or to work with backgrounds. The code matches the current version of Material 2 - at the time of writing this is 2.0.0-beta.12.

Markup:

<mat-sidenav-container class="all-wrap" fullscreen>  <mat-sidenav #sidenav>    <mat-list>      <mat-list-item [routerLink]="['/']"> Foo</mat-list-item>      <mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item>    </mat-list>  </mat-sidenav>  <div class="page-wrap">    <header role="banner">      <mat-toolbar color="primary">        <button          type="button"          mat-icon-button          (click)="sidenav.open()"          title="Open sidenav">          <mat-icon>menu</mat-icon>        </button>        Your Toolbar      </mat-toolbar>    </header>    <main class="content">      <router-outlet></router-outlet>    </main>    <footer>      Your sticky footer with a variable height.    </footer>  </div></mat-sidenav-container>

Styles:

/* * Actual Sticky Footer Styles */.all-wrap {  min-height: 100vh;}.page-wrap {  display: flex;  flex-direction: column;  min-height: 100vh;}.content {  flex: 1;}/* * Make the Component injected by Router Outlet full height: */main {  display: flex;  flex-direction: column;  > *:not(router-outlet) {    flex: 1;    display: block;  }}

You can find a more detailed description in a Blogpost that I wrote since I was unhappy with the solution I found here. There is also a demo.

Here is a solution in few lines:

app.component.html:

<div fxLayout="column" fxFlexFill>    <app-header></app-header> // your header    <div fxFlex>        <router-outlet></router-outlet> // your content    </div>    <app-footer></app-footer> // your footer</div>

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:

<div fxLayout="column" style="height: 100%;">    <app-header></app-header> // your header    <router-outlet></router-outlet> // your content    <app-footer fxFlexOffset="auto"></app-footer> // your footer</div>

styles.css:

html, body {    height: 100%;}

The answer can be found here:Sticky footer at the bottom in Angular 2

Solution

app {  min-height: 100%;  width: 100%;  margin-bottom: -271px;  display: table;}header-main,router-outlet,footer{  display: table-row;}header-main { height: 60px;}router-outlet {  position: absolute;}footer {  height: 271px;}