0

我正在寻找在 Angular (13.0.x) Material 页面框架中自动重新缩放元素的最佳当前方法。

我有一个静态<mat-toolbar>作为标题，以及一个<mat-sidenav-container>列出<mat-sidenav>的元素和<mat-sidenav-content>，如下所示：

<mat-toolbar>
  ...
</mat-toolbar>

<mat-sidenav-container>

  <mat-sidenav>
    <mat-nav-list>
      <mat-list-item>
        ...
      </mat-list-item>
      ...
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-card>
      <router-outlet></router-outlet>
    </mat-card>
  </mat-sidenav-content>

</mat-sidenav-container>

我希望<mat-sidenav>自动重新缩放（包括其子元素）以完全占据窗口的高度减去 的高度<mat-toolbar>，这样无论添加多少都不需要滚动来查看它包含的元素列表，并且我希望<mat-sidenav-content>自动滚动，因为它的内容总是比不滚动窗口的内容要多。

就我现在所知，尝试获取前者的最佳方法是添加到 CSS 中：

.mat-sidenav-container {
  min-height: 100vh;
}

这似乎使<mat-sidenav>窗口比窗口稍长，并且随着元素添加到<mat-nav-list>，此方法失败，因为它开始需要滚动。

有没有更有效的方法来做到这一点？

编辑

<mat-toolbar>我可以通过为标题和<mat-sidenav-container>外壳指定高度相对视口来解决其中的一些问题。剩下的唯一问题是自动调整内容的大小<mat-sidenav>，使其永远不需要滚动。

4

0 回答 0