让 MatBottomSheet 与顶部工具栏齐平?

Question

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

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

在这个堆栈闪电战演示中，我假设顶部工具栏的高度为 40px。 因此，我将MatBottomSheet100%显示的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% 离开 40 像素的顶部导航栏，您可以尝试使用此 css

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

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