Angular 7 роутеров устанавливает высоту больше окна

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
}

Исходя из других вопросов и моего собственного взгляда, кажется, что маршрутизатор на самом деле не содержит элемент, а элемент добавлен ниже.

Существует ли установленный способ удостовериться, что это не переполняет окно, или угловой способ захвата предмета и установки высоты?

Спасибо!

РЕДАКТИРОВАТЬ: я добавил стек здесь

Answer 1

Ваша проблема решаема с помощью CSS. Вы устанавливаете mat-sidenav-container height на 100vh, что означает, что нужно взять всю высоту окна. Но если вы добавите также элемент mat-toolbar и nav поверх вашего mat-sidenav-container, вы должны установить высоту 100vh - высота другого компонента.

Итак, это решение:

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