css - 带有固定(粘性)标签标签的 Angular Material 2 标签

Question

我有一个使用 Angular Material 2 mat-sidenav 布局的布局，在 mat-sidenav-content 部分有一个 mat-tab 布局。我正在尝试使 mat-tab-labels 具有粘性，以便它们始终可见，并且仍然允许动态标签内容滚动。我可以通过在 mat-sidenav-content 上设置 overflow: hidden 然后在 上设置 overflow: scroll 来让标签保持固定code>mat-tab-body-wrapper 元素，但我必须设置固定高度才能让 tab-content 滚动，但我有动态内容，所以固定高度不是'没有选择。有没有一种方法可以在不设置固定高度的情况下获取粘性标签和滚动条？

下面是一个演示。缩小窗口的垂直高度，直到它覆盖“大内容”div 的一部分。它不会滚动。然后取消注释设置高度的 mat-tab-group css，它将根据需要滚动(但高度固定)。

https://stackblitz.com/edit/angular-rty6oe?file=app%2Fsidenav-fixed-example.css

更新

好吧，@Dakota Maker 的回答解决了眼前的问题，也让我想起了我最初试图解决的问题，它让我无法滚动。我更新了我的示例应用程序以更好地反射(reflect)我的真实应用程序。我在位于 mat-tab-group 上方的 sidenav-content 区域内有一个子标题，滚动时它永远不会到达底部，除非窗口高度足够大，因为标题似乎已将内容向下推和关闭屏幕。我可以在内容底部添加边距以补偿子标题，但子标题区域高度可以更改。

如果我应该接受原始问题的答案并打开一个新问题，请告知。

Answer 1

设置 height:100% 一个 mat-tab-groups ，你就可以滚动了，中间不会有一个大的白色 block 内容丰富

编辑以配合 OP 的更新:

您可以向 .mat-tab-body-wrapper 添加类似 bottom:12px 的内容，以在底部为其提供固定数量的空间。这最终会在包装器顶部给你一些溢出，有些与标签所在的位置重叠，但你应该能够解决这个问题，同时添加类似 margin-top:12px 到同一个街区。希望这对您有所帮助!