角度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％。