带有工具栏的角全屏布局答案

【问题标题】：Angular Full Screen Layout With Toolbar带有工具栏的角全屏布局
【发布时间】：2018-05-24 07:53:49
【问题描述】：

Angular 4.4.4 Angular 材质 2.0.0-beta.12

我正在尝试实现桌面布局，其中屏幕顶部有一个 Angular 材质工具栏，下面的 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 非常适合。子组件位于工具栏的正下方，但在窗口底部下方延伸了工具栏的高度，从而导致出现滚动条。

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

【问题讨论】：

一直在尝试使用 Angular 5 和最新材料来做到这一点，但没有运气。仅当我将自己的标题放在全屏侧导航上方时才有效，并且不使用工具栏

标签： html angular angular-material2

【解决方案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>

【讨论】：