角材料2个带有固定（粘性）标签的标签

Question

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

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

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

UPDATE

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

如果我应该接受原始问题的答案并打开一个新问题，请提出建议。

Answer 1

设置height:100%一个mat-tab-groups ，您将可以滚动，并且大内容中间不会有大的白色块

编辑伴随OP的更新：

您可以在.mat-tab-body-wrapper添加诸如bottom:12px以在bottom:12px提供固定的空间。 这最终将使您在包装器顶部的一些溢出与选项卡所在的位置重叠，但是您应该能够解决此问题，并在同一块中添加margin-top:12px之类的内容。 希望这会有所帮助！