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

Question

I'm making a new angular2 application using angular2-material with a sidenav. And I can't for the life of me get that sidenav to have a height of 100%. I'm trying to get a menu to slide out that takes up the whole height of the screen. And I want it to open the same way no matter where the user has scrolled.

Here is my template:

<md-sidenav-layout class="demo-sidenav-layout">   <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> 

And here is my CSS:

.demo-sidenav-layout {   //border: 3px solid black;   min-height:100%;   md-sidenav {     padding: 10px;     background: gainsboro;     min-height: 100%;   } }  .demo-sidenav-content {   padding: 15px;   min-height:100%; }  .demo-toolbar {   padding: 6px;    .demo-toolbar-icon {     padding: 0 14px 0 14px;   }    .demo-fill-remaining {     flex: 1 1 auto;   }  } 

I also have html set to height:100% and body set to min-height:100%

Answer 1

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> 

Answer 2

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%; }