각도 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 %로 만듭니다.