Question

我正在一个Angular 7项目中工作，该项目涉及一个单页应用程序，顶部有一个工具栏，一个使用路由的选项卡选择器，以及一个路由器插座。我试图将应用程序的总高度固定为100％视口。问题是，路由器出口的内容设置为100vh时，会将本身扩展为100％视口，从而使其脱离屏幕显示，或者设置为100％时，则不会显示完全没有这是here上发现的问题，但是建议的解决方案似乎没有用。这是一些相关的代码：

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
}

基于其他问题和我自己的看法，路由器似乎实际上并不包含该元素，而是在下面添加了该元素。

有没有确定的方法可以确保它不会溢出窗口，还是有角度的抓取物品和设置高度的方式？

谢谢！

编辑：我添加了一个here堆叠炸弹

Answer 1

您的问题可以使用CSS解决。您将mat-sidenav-container的{{1}}设置为height意味着要占用所有窗口高度。但是，如果在100vh的顶部还添加一个mat-toolbar和一个nav元素，则应将高度设置为100vh-其他组件的高度。

这是一个解决方案：

mat-sidenav-container

Angular 7路由器出口将高度设置为大于窗口

1 个答案: