Я делаю новое приложение angular2, используя angular2-материал с sidenav. И я не могу за всю свою жизнь добиться, чтобы этот сиденав имел высоту 100%. Я пытаюсь вытащить меню, которое занимает всю высоту экрана. И я хочу, чтобы он открывался одинаково независимо от того, где пользователь прокручивал.

Вот мой шаблон:

<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>

И вот мой 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;
  }

}

у меня тоже естьhtml установлен вheight:100% а такжеbody установлен вmin-height:100%