title: Can't get angular-material md-sidenav to be 100% height
body: <p>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.  </p>
  
  <p>Here is my template:</p>
  
  <pre><code>&lt;md-sidenav-layout class="demo-sidenav-layout"&gt;
    &lt;md-sidenav #start mode="over"&gt;
  
      &lt;a [routerLink]="['/login']" class="btn btn-primary"&gt;Log in&lt;/a&gt;
      &lt;br&gt;
    &lt;/md-sidenav&gt;
      &lt;md-toolbar color="primary"&gt;
  
        &lt;button md-button (click)="start.toggle()"&gt;Open Side Drawer&lt;/button&gt;
        &lt;span&gt;Spellbook&lt;/span&gt;
  
        &lt;span class="demo-fill-remaining"&gt;
  
        &lt;/span&gt;
  
      &lt;/md-toolbar&gt;
    &lt;div class="demo-sidenav-content"&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/md-sidenav-layout&gt;
  </code></pre>
  
  <p>And here is my CSS: </p>
  
  <pre><code>.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;
    }
  
  }
  </code></pre>
  
  <p>I also have <code>html</code> set to <code>height:100%</code> and <code>body</code> set to <code>min-height:100%</code></p>