mat-tab 沒有在 Angular 中設置全高

Question

我正在使用 mat-tab 但它沒有占據整個高度並且在底部留下了邊距。

HTML:

  <div class="left-wrapper">
            <horizontal-tab-group
                [tabs]="tabs"
                dataAutomation="TAB-GROUP"
                [selectedIndex]="selectedTabIndex"
                (selectedTabIndexChanged)="setActiveTab($event)"
            ></horizontal-tab-group>
            <ng-template #allTemplate dataAutomation="Count AllTemplate">
                <count-all></count-all>
            </ng-template>
            <ng-template #sumTemplate dataAutomation="Count Sum Template">
                <count-sum> </count-sum>
            </ng-template>
   </div>

CSS：

.left-wrapper {
                flex-basis: 44%;
                display: flex;
                flex-direction: column;
                height: 37rem;
            }

我該如何解決這個問題？

Answer 1

可以通過改變css來解決，如下：

.left-wrapper {
                flex-basis: 44%;
                display: flex;
                flex-direction: column;
                height: 37rem;

                ::ng-deep .mat-tab-body-wrapper {
                    height: 37rem;
                }

                ::ng-deep .mat-tab-body.mat-tab-body-active {
                    height: 37rem;
                }
            }

Answer 2

我最終做的是僅將選項卡用於標題（選項卡按鈕）。 並使用選定的選項卡索引到選項卡下的*ngIf div。

截至 2022 年底，標簽頁眉高度為49px 。 所以我只是將樣式height: calc( 100% - 49px)添加到其他 div。