Ich erstelle eine neue angle2-Anwendung mit angle2-Material und einer Sidenav. Und ich kann nicht für das Leben von mir, dass Sidenav eine Höhe von 100% haben. Ich versuche, ein Menü zum Herausschieben zu bekommen, das die gesamte Höhe des Bildschirms einnimmt. Und ich möchte, dass es auf dieselbe Weise geöffnet wird, unabhängig davon, wo der Benutzer gescrollt hat.

Hier ist meine Vorlage:

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

Und hier ist mein 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;
  }

}

Ich habe auchhtml einstellenheight:100% undbody einstellenmin-height:100%