如何确保组件填充 html/angular 中可用的 space

How to make sure a component fills the available space in html/angular

我有一个 angular 应用程序,angular 应用程序有一个 header、一个侧边菜单和一个主要内容。 我正在努力让这个“主要内容”占据全部可用高度。 这很重要,因为在这个视图中我有一个浮动操作按钮需要位于 bottom-right.

我在这里重现了这个问题:https://stackblitz.com/edit/sidenav-height-issue?

我试过在几个地方将高度设置为 100%,但没有成功。我该怎么办?

谢谢!

您需要将 sidenav 容器的 height 设置为 100%

<mat-sidenav-container style="height: 100%;">
    <!-- <mat-sidenav #sidenav role="navigation">
    
</mat-sidenav-container>