让MatBottomSheet与顶部工具栏齐平？

Question

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

https://material.angular.io/components/bottom-sheet/examples

In this stackblitz demo我假设顶部工具栏的高度是40px。因此，我将MatBottomSheet 100%显示的HelloComponent的height和顶部的页边距设置为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%不能工作吗？

Answer 1

如果高度是100%离开顶部导航栏40px，你可以尝试这个css

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

使用calc功能，它将始终调整为100%的高度，将yoir 40px保留为顶部导航栏