volle Höhe sidenav unter einer Symbolleiste (Cross-Device)

Question

ich meine sidenav setzte auf diese Weise 100% der Bildschirmhöhe zu passen:

Mein app.component.html:

<md-toolbar>etc</md-tooblar> 

<router-outlet></router-outlet> 

einer meiner Routen bezieht sich auf die sidenav auf diese Weise:

admin.component.ts

<md-sidenav-container> 
    <md-sidenav #sidenav mode="side" opened="true" class="sidenav"> 
     My Sidenav 
    </md-sidenav> 

    <div class="sidenav-content mat-typography"> 
     <router-outlet></router-outlet> 
    </div> 
</md-sidenav-container> 

admin.component.css:

md-sidenav-container { 
    height: 100vh; 
} 

Das Problem ist, dass die Höhe 100% ohne die Toolbar von meiner Haupt-App-Komponente ist, und es gibt eine Scrollbar in jedem meiner Seiten.

Ich habe versucht, meine md-sidenav-Container Höhe auf 93% (die passt perfekt in meinem Bildschirm), aber in anderen Bildschirmen der Container fehlt etwa 30-50 Pixel von der Unterseite des Bildschirms (der Container nicht erreiche den Bildschirm unten).

Irgendeine Lösung dafür?

Answer 1

md-sidenav-container { 
    height: calc(100vh - hightOfToolbar); 
} 

Putting sollte überall funktionieren, wie Sie die Behälterhöhe anpassen max Höhe auszusortieren - Symbolleiste Höhe.