Can't get angular-material md-sidenav to be 100% height

Use fullscreen

<md-sidenav-layout fullscreen>

  <md-sidenav #start mode="over">
    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>

  <md-toolbar color="primary">
    <button md-button (click)="start.toggle()">Open Side Drawer</button>
    <span>Spellbook</span>
    <span class="demo-fill-remaining"></span>
  </md-toolbar>

  <div class="demo-sidenav-content">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-layout>

Acording to a comment on Issue : Angular Material 2 - not rendering in full screen the fullscreen attribute will be removed...

Try this instead:

mat-sidenav-container {
   position: fixed;
   height: 100%;
   min-height: 100%;
   width: 100%;
   min-width: 100%;
}

In the latest version of material.angular you can use the property fixedInViewport on mat-sidenav.

See below.

<mat-sidenav #start mode="over" fixedInViewport="true"> ... </mat-sidenav>