html - 带工具栏的 Angular 全屏布局

Question

Angular 4.4.4 Angular Material 2.0.0-beta.12

我正在尝试实现一个桌面布局，其中屏幕顶部有一个 Angular Material 工具栏，下面的 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>