mat-tab 未在 Angular 中设置全高答案

【问题标题】：mat-tab is not setting full height in Angularmat-tab 未在 Angular 中设置全高
【发布时间】：2022-08-02 22:55:05
【问题描述】：

我正在使用 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;
            }

我该如何解决这个问题？

标签： html css angular angular-material

【解决方案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;
                }
            }

【讨论】：