Angular 7 router-outlet sets height 大于 window

Question

我正在处理一个 Angular 7 项目，该项目涉及一个单页应用程序，顶部有一个工具栏、一个使用路由的选项卡选择器和一个路由器插座。我正在尝试将应用程序的总高度固定为视口的 100%。问题是路由器出口的内容，当设置为 100vh 时，将自身扩展为 100% 的视口，导致它离开屏幕，或者当设置为 100% 时，不会'根本不露面。这是一个已确定的问题，但建议的解决方案似乎不起作用。这是一些相关代码：

app.component.html

<div class="fixed-location">
  <app-main-toolbar></app-main-toolbar>
  <nav mat-tab-nav-bar>
    <a mat-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="['/'+link.path]"
       routerLinkActive
       #rla="routerLinkActive"
       [active]="rla.isActive ? true : null">
       {{link.label}}
    </a>
  </nav>
  <div class="filled" [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
      <router-outlet #o="outlet"></router-outlet>
  </div>
</div>

app.component.css

.fixed-location {
  position: absolute;
  top: 0;
  width: 100vw;
  flex-direction: column;
  flex-flow: column;
  height: 100vh;
}

nav {
    text-align: center;
    align-items: center;
    justify-content: space-around;
    display: flex;
    flex-direction: row;
}

.filled {
    flex-grow: 1
}

designer-view.component.html（填充路由器的一项）

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav class="sidebar-container" mode="side" opened>
      <app-elements-sidebar></app-elements-sidebar>
  </mat-sidenav>
  <mat-sidenav-content>
      <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
          <div class="example-box" *ngFor="let task of tasks" cdkDrag>{{timePeriod}}</div>
      </div>
  </mat-sidenav-content>
  <mat-sidenav mode="side" position="end" opened>
      <app-config-sidebar></app-config-sidebar>
  </mat-sidenav>
</mat-sidenav-container>

designer-view.component.css（填充路由器的一项）

mat-sidenav-container {
    display: flex;
    flex-direction: column;
    background-color: blue;
    height: 100%
}

.filled {
    flex-grow: 1;
    padding-top: 0px;
}


mat-sidenav {
    width: 250px;
    flex-grow: 1
}

根据其他问题和我自己的观察，路由器实际上并不包含该元素，而是在下面添加了该元素。

是否有确定的方法来确保它不会溢出 window，或者是否有一种 angular 风格的抓取项目和设置高度的方法？

谢谢！

编辑：我添加了一个 stackblitz here

Answer 1

您的问题可以通过 css 解决。您正在将 mat-sidenav-container 的 height 设置为 100vh，这意味着占据所有 window 高度。但是，如果您还在 mat-sidenav-container 之上添加一个 mat-toolbar 和一个 nav 元素，您应该将高度设置为 100vh - 其他组件的高度。

所以这是一个解决方案：

mat-sidenav-container[_ngcontent-c4] {
    display: flex;
    flex-direction: column;
    background-color: blue;
    /* height: 100vh; */
    height: calc(100vh - 64px - 49px);
}

Angular 7 router-outlet sets height 大于 window

Angular 7 router-outlet sets height greater than window

javascript

css

angular

router-outlet

angular7