如何修改mat-tab-group内容显示起始点并固定公共Div

现有如下Angular Material标签页代码：

<mat-tab-group dynamicHeight>
  <mat-tab label="Short tab">
    <div class="example-small-box mat-elevation-z4">
      Common Div
    </div>
    <div class="example-small-box mat-elevation-z4">
      Nav 1
    </div>
  </mat-tab>
  <mat-tab label="Long tab">
    <div class="example-small-box mat-elevation-z4">
      Common Div
    </div>
    <div class="example-small-box mat-elevation-z4">
      Nav 2
    </div>
  </mat-tab>
</mat-tab-group>

需求：

• 避免在每个标签页中重复编写Common Div，将其固定，切换标签页时仅让非公共内容区域（如Nav 1、Nav 2）滑动切换。
• 修改mat-tab-group的内容显示起始位置，将当前红色箭头的起始位置改为黄色箭头位置，以便在前方放置公共Div：
  

解决方案 #

方法一：将公共内容移出标签组（推荐） #

直接把公共Div放在mat-tab-group外部，配合CSS调整布局实现对齐，完全避免重复代码：

<!-- 公共内容区域 -->
<div class="example-small-box mat-elevation-z4 common-div">
  Common Div
</div>

<!-- 标签页组 -->
<mat-tab-group dynamicHeight class="adjusted-tab-group">
  <mat-tab label="Short tab">
    <div class="example-small-box mat-elevation-z4">
      Nav 1
    </div>
  </mat-tab>
  <mat-tab label="Long tab">
    <div class="example-small-box mat-elevation-z4">
      Nav 2
    </div>
  </mat-tab>
</mat-tab-group>

对应的CSS：

/* 匹配标签页内容的默认内边距，保证左右对齐 */
.common-div {
  margin: 0 16px;
  margin-bottom: 8px; /* 可选：添加和标签页内容的间距 */
}

/* 移除标签页内容的顶部内边距，避免和公共区域产生空隙 */
.adjusted-tab-group .mat-tab-body-wrapper {
  padding-top: 0;
}

方法二：将公共内容嵌入标签组内部 #

如果必须把公共内容放在mat-tab-group内部，可通过相对+绝对定位实现：

<mat-tab-group dynamicHeight class="custom-tab-group">
  <!-- 公共内容 -->
  <div class="common-container">
    <div class="example-small-box mat-elevation-z4">
      Common Div
    </div>
  </div>

  <mat-tab label="Short tab">
    <div class="example-small-box mat-elevation-z4">
      Nav 1
    </div>
  </mat-tab>
  <mat-tab label="Long tab">
    <div class="example-small-box mat-elevation-z4">
      Nav 2
    </div>
  </mat-tab>
</mat-tab-group>

对应的CSS：

.custom-tab-group {
  position: relative;
}

.common-container {
  position: absolute;
  top: 48px; /* 对应标签栏的默认高度，可根据实际调整 */
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 16px;
}

/* 给标签页内容添加顶部内边距，避免被公共内容遮挡 */
.custom-tab-group .mat-tab-body-wrapper {
  padding-top: 80px; /* 公共内容高度 + 间距，需根据实际内容调整 */
}

注意事项 #

• 方法一逻辑简单，维护成本低，优先推荐使用。
• 方法二如果遇到公共内容高度不固定的情况，建议用flex布局替代绝对定位，或者通过Angular指令动态计算高度并设置内边距。
• 修改内容起始位置的核心是调整标签页内容容器的内边距或外部布局，上述两种方法都能满足需求。

内容的提问来源于stack exchange，提问作者nyla L