要让MatBottomSheet与顶部工具栏齐平吗？

Question

如果要弹出MatBottomSheet以使其顶部与顶部工具栏齐平，那么实现此目的的最佳方法是什么？这是文档中的演示。

In this stackblitz demo我假设顶部工具栏的高度为40px。因此，我将height HelloComponent显示的MatBottomSheet的100%和上边距设置为40px，这应使其与工具栏不重叠，但是这在工作表上不太正确。

我们如何为MatBottomSheet容器设置样式？我也尝试过：


.mat-bottom-sheet-container {
  min-height: 100%;
  margin-top: 40px;
}

我认为这会起作用：


.mat-bottom-sheet-container {
  min-height: vh;
  margin-top: 40px;
}

任何人都知道为什么min-height: 100%不起作用？

另外，我正在尝试将宽度设为100％。这就是我所拥有的：

.mat-bottom-sheet-container {
  min-height: 100vh;
  min-width: 100vw;
  margin-top: 40px;
}

没有效果。有想法吗？

Answer 1

如果要使高度保持100％，而顶部导航栏为40 px，则可以尝试使用此CSS

.mat-bottom-sheet-container {
  height: calc(100%-40px);
  margin-top: 40px;
}

使用calc功能，它将始终调整为100％的高度，顶部导航栏为40像素，同时您的yoir仍为40px