Can't get angular-material md-sidenav to be 100% height
<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>