css - Angular 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;，这将使元素成为视口(viewport)高度的 100%，而不是尝试填充父元素的 100%。