JHipster - 如何拥有一个适合所有高度而没有滚动条的主页组件？

Question

在 JHipster (Angular) 生成的前端中，我遇到了布局问题，特别是主页组件问题。 我的 FE 有 3 个主要“对象”：水平导航栏、侧面导航栏（可通过左侧的“栏”按钮激活）和显示 Cesium 查看器的主页组件。 home 组件似乎不适合所有可用的高度，并且 Cesium 查看器下方显示一个空的水平行。 如何设置主页组件以适合所有可用的高度？ 谢谢大家。

main.component.hmtl

<div class="main-view">
  <div>
    <router-outlet name="navbar"></router-outlet>
  </div>
  <div>
    <jhi-sidenav></jhi-sidenav>
  </div>
</div>

sidenav.component.html

<mat-drawer-container class="black-container">
  <mat-drawer #drawer mode="push" class="black-container">
    ... some object ...
    <mat-divider></mat-divider>
    ... some object ...
  </mat-drawer>
  <jhi-fab-sidenav-button></jhi-fab-sidenav-button>
  <div class="card jh-card">
    <router-outlet></router-outlet>
  </div>
</mat-drawer-container>

navbar.component.html

<nav data-cy="navbar" class="navbar navbar-dark navbar-expand-md bg-dark">
  <div class="container-fluid">
  ...
  </div>
</nav>

main.component.scss

.main-view {
    width: 100vw;
    height: 100vh;
}

::ng-deep .jh-card {
    padding: 0%;
    margin-top: 0px;
    border: none;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    min-height: 95vh;
}