Angular Material 2 个带有固定（粘性）标签的标签
Angular Material 2 Tabs with fixed (sticky) tab labels
我有一个使用 Angular Material 2 mat-sidenav 布局的布局，在 mat-sidenav-content 部分有一个 mat-tab 布局。我正在尝试使 mat-tab-labels 变粘，以便它们始终可见，并且仍然允许动态 tab-content 滚动。我可以通过在 mat-sidenav-content 上设置 overflow: hidden 然后在 mat-tab-body-wrapper 元素上设置 overflow: scroll 来让标签保持固定，但我必须设置一个固定的高度才能获得tab-content 滚动，但我有动态内容，所以固定高度不是一个选项。有没有一种方法可以在不设置固定高度的情况下获得我的粘性标签和滚动？
下面是一个演示。缩小 window 的垂直高度，直到它覆盖 "Large content" div 的一部分。它不会滚动。然后取消注释 mat-tab-group css 设置高度，它将根据需要滚动（但固定高度）。
https://stackblitz.com/edit/angular-rty6oe?file=app%2Fsidenav-fixed-example.css
更新
好吧，@Dakota Maker 的回答解决了眼前的问题，也让我想起了我最初试图解决的问题，导致我无法滚动。我更新了我的示例应用程序以更好地反映我的真实应用程序。我在位于 mat-tab 组上方的 sidenav-content 区域内有一个 sub-header，滚动时它永远不会到达底部，除非 window 高度足够大，因为header 似乎已将内容向下推到屏幕之外。我可以在内容底部添加边距以补偿 sub-header，但 sub-header 区域高度可以更改。
如果我应该接受原问题的答案并开一个新问题，请指教。
设置height:100%一个mat-tab-groups就可以滚动了，大内容中间不会有大白块
编辑以配合 OP 的更新：
您可以在 .mat-tab-body-wrapper 中添加类似 bottom:12px 的内容，以在底部为其提供固定数量的 space。这最终会给你一些在包装器顶部的溢出，有些与选项卡所在的位置重叠，但你应该能够解决这个问题，也可以在同一个块中添加 margin-top:12px 之类的东西。希望这对您有所帮助！
我有一个使用 Angular Material 2 mat-sidenav 布局的布局，在 mat-sidenav-content 部分有一个 mat-tab 布局。我正在尝试使 mat-tab-labels 变粘，以便它们始终可见，并且仍然允许动态 tab-content 滚动。我可以通过在 mat-sidenav-content 上设置 overflow: hidden 然后在 mat-tab-body-wrapper 元素上设置 overflow: scroll 来让标签保持固定，但我必须设置一个固定的高度才能获得tab-content 滚动，但我有动态内容，所以固定高度不是一个选项。有没有一种方法可以在不设置固定高度的情况下获得我的粘性标签和滚动？
下面是一个演示。缩小 window 的垂直高度，直到它覆盖 "Large content" div 的一部分。它不会滚动。然后取消注释 mat-tab-group css 设置高度，它将根据需要滚动（但固定高度）。
https://stackblitz.com/edit/angular-rty6oe?file=app%2Fsidenav-fixed-example.css
更新
好吧，@Dakota Maker 的回答解决了眼前的问题，也让我想起了我最初试图解决的问题，导致我无法滚动。我更新了我的示例应用程序以更好地反映我的真实应用程序。我在位于 mat-tab 组上方的 sidenav-content 区域内有一个 sub-header，滚动时它永远不会到达底部，除非 window 高度足够大，因为header 似乎已将内容向下推到屏幕之外。我可以在内容底部添加边距以补偿 sub-header，但 sub-header 区域高度可以更改。
如果我应该接受原问题的答案并开一个新问题，请指教。
设置height:100%一个mat-tab-groups就可以滚动了，大内容中间不会有大白块
编辑以配合 OP 的更新：
您可以在 .mat-tab-body-wrapper 中添加类似 bottom:12px 的内容，以在底部为其提供固定数量的 space。这最终会给你一些在包装器顶部的溢出，有些与选项卡所在的位置重叠，但你应该能够解决这个问题，也可以在同一个块中添加 margin-top:12px 之类的东西。希望这对您有所帮助！