带工具栏的角度全屏布局

Question

Angular 4.4.4 Angular Material 2.0.0-beta.12

我正在尝试实现桌面布局，其中屏幕顶部有一个 Angular Material Toolbar，router-outlet下面的内容填充剩余的屏幕高度。我希望router-outlet内容填充屏幕高度，以便我可以将任何子/孙组件的高度设置为 100%，直到我想提供滚动条为止。

我已经回到基础去尝试只div用一个边框来填充工具栏下方剩余的空间，但我什至无法让它工作。看起来好像替换的组件router-outlet是全屏的高度，不考虑其上方的工具栏。

我app.component的如下：

<div id="app-component" style="height: 100%; border: 1px solid red;">

    <!-- Application Toolbar -->
    <mat-toolbar id="mat-toolbar" color="primary" style="margin: 0; padding: 0;">

        <span style="padding-right: 16px;">Indigo</span>

        <nav id="tabNavBar" #tabNavBar mat-tab-nav-bar>
            <a mat-tab-link *ngFor="let tabNavLink of tabNavLinks"
               [routerLink]="[tabNavLink.path]"
               routerLinkActive
               #rla="routerLinkActive"
               [routerLinkActiveOptions]="{exact: true}"
               [active]="rla.isActive"
               (click)="onClickTab(tabNavLink)"
               style="height: 64px;">
                {{ tabNavLink.label }}
            </a>
        </nav>

    </mat-toolbar>

    <!-- Application Module Content -->
    <router-outlet></router-outlet>

</div>

目标组件router-outlet如下：

<div style="width: 100%; height: 100%; margin: 0; padding: 0; border: 1px solid #4cff00;"></div>

在app.component完全适合。子组件位于工具栏的正下方，但在窗口底部下方延伸工具栏的高度，导致出现滚动条。

我已经尝试了无数不同的方法来解决这个问题，但希望得到一些关于这种令人沮丧的简单布局的建议。

Answer 1

我已经使用 display flex 来实现这一点。我在这里创建了一个非常基本的示例：https : //stackblitz.com/edit/angular-n3s1ul

这个想法是使用 flex 来对齐标题和内容，而内容有 overflow:auto 以在必要时显示滚动条。请参阅下面的代码以获取概述，完整代码可在链接中找到。

CSS

my-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

mat-sidenav-container.mat-drawer-container {
  overflow: auto;
  flex-grow: 1;
}

HTML

<mat-toolbar color='primary'>
  <h1 routerLink="/">Hello World</h1>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>