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

我试图做的是为所有标签设置min-height:100%,但这不起作用.如果我以像素为单位设置高度,它将正确更新.如何让内容填充窗口的高度？

HTML布局和应用程序的屏幕截图

Answer 1

您可能还需要设置min-height: 100%;此元素的父元素,因为它们可能不是默认情况下.或者您可以使用min-height: 100vh;,这将使元素100%的视口高度,而不是尝试填充100%的父.