如何让Angular的mat-tab组件占满全部可用空间

问题根源 #

mat-tab系列组件的默认容器高度为自适应内容高度，且多层嵌套时父级容器未显式设置高度，导致内部元素设置百分比高度（比如Tailwind的h-full）无法生效。同时你设置的dynamicHeight="true"属性会让tab组高度跟随内容动态调整，和固定占满父容器的需求冲突。

具体操作步骤 #

• 第一步：移除所有mat-tab-group上的dynamicHeight="true"属性，该属性会强制tab组自适应内容高度，阻碍100%高度配置生效。
• 第二步：给需要占满高度的mat-tab-group添加自定义类，避免全局样式污染其他tab组件：

<mat-tab-group class="full-height-tabs">
  <mat-tab label="Test Tab 1">
    <!-- 内层嵌套的mat-tab-group也要加相同的自定义类 -->
    <mat-tab-group class="full-height-tabs">
      <mat-tab label="Test Child Tab 1">
          <div class="h-full bg-yellow-400 text-center align-middle"> Split Container </div>
      </mat-tab>
      <mat-tab label="Test Child Tab 2"></mat-tab>
    </mat-tab-group>
  </mat-tab>
  <mat-tab label="Test Tab 2">
  </mat-tab>
</mat-tab-group>

• 第三步：在全局样式文件（通常是styles.css/styles.scss）中添加对应样式：

/* 先保证根节点高度100% */
html, body {
  height: 100%;
  margin: 0;
}
/* 给当前组件的宿主元素设置高度，也可以单独在对应组件的样式里加 */
.full-height-tabs-host {
  height: 100%;
  display: block;
}
/* 匹配自定义类的tab组全链路高度设置 */
.full-height-tabs,
.full-height-tabs .mat-tab-body-wrapper,
.full-height-tabs .mat-tab-body,
.full-height-tabs .mat-tab-body-content {
  height: 100%;
  /* 如果不需要内容溢出滚动可以加 overflow: hidden; */
}

• 第四步：在使用该tab的组件样式中添加宿主元素样式，或者直接给宿主加上面的full-height-tabs-host类即可。

替代方案（不修改全局样式） #

如果不想改动全局样式，可在对应组件的样式中使用::ng-deep来覆盖样式，也可以通过在组件的@Component装饰器中设置encapsulation: ViewEncapsulation.None关闭样式隔离实现局部覆盖，不过更推荐上面的全局自定义类方案，可复用性更高且样式逻辑更清晰。

内容的提问来源于stack exchange，提问作者Tech Wizard