具有固定选项卡标题和内容中固定 div 的 Angular 材质选项卡答案

【问题标题】：Angular Material Tabs with Fixed Tab Header and Fixed Div In Content具有固定选项卡标题和内容中固定 div 的 Angular 材质选项卡
【发布时间】：2020-02-10 07:18:50
【问题描述】：

试图做到这一点：

虽然我在修复选项卡标题行方面取得了一些成功，但我无法让带有按钮的 div 也保持固定（我认为因为它是选项卡内容的一部分，而不是选项卡标题)

有什么想法/解决方案吗？我开始认为角度材质选项卡不适用于我的 UI。是否可以手动为选项卡构建呈现的 html 并将工具栏按钮 div 移动到选项卡标题容器中？

https://stackblitz.com/angular/mkdpjkxlemv

【问题讨论】：

stackblitz 项目与您所附图片中的不同，但我建议将固定标题下方的内容包装到一个 div 中，给它一个固定高度然后设置overflow: auto。
谢谢@QuanVO，我会试一试。问题可能是 mat-* 指令渲染 html。我无法控制生成的 html（据我所知）
我刚刚创建了stackblitz.com/edit/angular-tab-custom，告诉我是否可以。
@QuanVO 非常感谢。我想我想太多了（不是第一次）。您的解决方案的美妙之处在于它的简单性。我将此添加到高度以满足我的特定需求，因此当窗口的总高度小于内容的高度时，只有一个滚动条。 .content{ height: calc(100vh - 200px); overflow: auto; padding: 1em; // border: 1px solid blue; }我如何接受您的评论是解决方案？
@Jasonc 很高兴为您提供帮助。我会写它作为答案。请接受它。

标签： css angular angular-material css-grid

【解决方案1】：

将固定标头下方的内容包装成div

<div class="header">
    <button mat-raised-button>Button 1</button>
    <button mat-raised-button>Button 2</button>
</div>
<div class="content">
     Content
</div>

根据需要给它一个固定的高度，然后将overflow 设置为auto

.content{
  height: 40vh;
  overflow: auto;
  padding: 1em;
}

这是一个完全可用的example。希望这会有所帮助。

【讨论】：