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>