Angular 2-Komponente füllt den Bildschirm nicht

Question

Meine Root-Komponente füllt den Bildschirm nicht in der Höhe. Wurzelkomponente Vorlage ist die folgende:

<md-toolbar color="primary" id="tool"> 
    <div fxLayout="row" style="width: 100%"> 
    <div fxFlex="10" fxFlexAlign="center"> 
     <md-icon (click)="navigateBack()" [hidden]="!showBackNavigation">keyboard_arrow_left</md-icon> 
    </div> 
    <div fxFlex="70" fxFlexAlign="center"> 
    <span> 
     {{headerTitle}} 
    </span> 
    </div> 
    </div> 
</md-toolbar> 
<router-outlet> 
</router-outlet> 

Was ich versuche zu tun, min-height einzustellen: 100% für alle Tags, aber das hat nicht funktioniert. Wenn ich die Höhe in Pixel festlege, wird sie korrekt aktualisiert. Wie kann ich den Inhalt füllen, um die Fensterhöhe zu füllen?

Screenshot with HTML layout and application

Answer 1

Sie wahrscheinlich müssen auch min-height: 100%; an die übergeordneten Elemente dieses Elements setzen, da sie standardmäßig nicht sein kann. Oder Sie können stattdessen min-height: 100vh; verwenden, wodurch das Element zu 100% aus der Höhe des Ansichtsfensters besteht, anstatt zu versuchen, 100% des übergeordneten Elements zu füllen.