角度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％，但这不起作用。如果我以像素为单位设置高度，它将正确更新。如何让内容填充窗口的高度？

Screenshot with HTML layout and application

Answer 1

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