角度2のコンポーネントが画面に表示されない

Question

ルートコンポーネントが画面の高さに表示されません。

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

私は何をしようとしていたこと分の高さを設定することです：：ルートコンポーネントテンプレートは次のようである100のすべてのタグの％が、これは動作しませんでした。高さをピクセル単位で設定すると、正しく更新されます。ウィンドウの高さにコンテンツを埋め込むにはどうすればいいですか？

Screenshot with HTML layout and application

Answer 1

あなたはおそらくも、彼らは、デフォルトではないかもしれないとして、この要素の親要素にmin-height: 100%;を設定する必要があります。またはmin-height: 100vh;を代わりに使用できます。これにより、親の100％を塗りつぶす代わりに、要素がビューポートの高さの100％になります。