带高度的角形材料垫子抽屉问题

Question

出于某种原因，我似乎无法让垫子抽屉占据屏幕上剩余的可用高度。 我试过了：

.drawer-container {
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    min-width: 100%;
}

但是，即使滚动条指示的屏幕上只有一个元素，由于某种原因我仍然会溢出：

当我删除 CSS 规则时，我最终得到了这个：

基本上只有屏幕高度的 10% 左右。 我考虑过使用固定高度，但我猜如果在更大或更小的显示器上查看它会看起来被切断。 我很感激任何帮助，因为我真的不熟悉角材料的全部属性以及如何正确操作它们。 提前致谢。

Answer 1

万一被这个掉线并有类似的问题。 我很久以前通过申请解决了这个问题

.drawer-container {
  position: absolute;
  top:0;
  width: 100%;
  bottom: 0;
}

只要确保父母有一个position: relative

Answer 2

我想 mat-sidenav 尚不支持基于百分比的宽度/高度。

尝试height: 100vh; 反而。

这应该可以工作，但如果您的页面中有任何工具栏，则会添加一个滚动条。

更新：

HTML：

<mat-drawer-container class="parent" autosize>
        <mat-drawer mode="side">
            Your sidenav content
        </mat-drawer>

        <div class="content">
            Your main content.
        </div>
</mat-drawer-container>

CSS：

.parent {
    width: 100%;
    height: 100vh;   // calc(100vh - 64px) can be used if there is navbar at the top
}

.content {
    height: 100%;
}