我直接好家伙。 哎呀，今天要跟大家唠唠这个Angular里的mat-tab，真的是气死我了。我就想弄个高度自适应，填充那个内容区域，后来啊搞了半天下面总是有一大块白白的空白，看着就烦。你说这Angular Material，官方文档写得跟天书似的，根本看不懂嘛。我就想把这个高度给它填满，怎么就这么难呢？是不是我太笨了？还是说这玩意儿本来就这么难搞？反正我是试了好多办法，再说说终于算是搞出来了吧，虽然我也不知道原理到底是啥，反正能跑就行。

那个让人头疼的高度问题

无语了... 咱们先说说这个事儿有多恶心。你弄个mat-tab-group，里面放点内容，后来啊呢，那个标签页下面的内容区域，它就不听话。你给它父容器设个高度，比如37rem，或者100%，它理都不理你。它就那么缩在那儿，下面留一大块空白。你说这叫什么事儿啊？我就想让它撑满整个父容器，这要求过分吗？我觉得一点都不过分。但是那个mat-tab-body-wrapper，它就是不听话，它就是不高。气得我想砸键盘。

摆烂。 而且啊，有时候你用flex布局，觉得flex-grow: 1应该能行了吧？嘿，它偏不行。它就像个懒汉一样，就在那儿躺着，不肯长高。你说这Angular是不是故意整我们这些苦逼的程序员？我觉得肯定是。不然怎么会这么难用？那个底部的空白，就像是在嘲笑我：“嘿嘿，你弄不死我，我就是有空白，气死你！”

瞎猫碰上死耗子的解决办法

拖进度。 后来我就去网上搜啊搜，看别人是怎么搞的。有的说用calc算一下有的说用::ng-deep穿透一下。我也看不太懂，反正就是一顿乱试。后来啊呢，还真让我试出来一点门道。虽然写出来的代码丑得要命，但是吧，它好像真的能用了。我就把这些代码贴出来大家看看，要是能看懂算你厉害。

先说说呢，咱们得说说这个高度计算的灵活性。这名字听着挺高大上的， 我们都... 其实就是硬算。你看下面这段代码，是不是看着挺晕的？

.left-wrapper ::ng-deep .mat-tab-body-wrapper,
.left-wrapper ::ng-deep .mat-tab--tab-body-active {
    height: calc); /* 假设 header 高度为 48px */
}

你看这个calc，这就是在算那个高度。它说嘿，我先把那个header的高度减掉，剩下的就是你的了。那个var是个啥玩意儿？我也搞不太懂， 谨记... 好像是个变量，如果没有这个变量，就默认是48px。反正就是减去那个标签头的高度，剩下的给内容。这逻辑听着还行，但是写起来真麻烦。

说白了就是... 或者呢， 如果那个left-wrapper和horizontal-tab-group都用了那个什么Flexbox布局，就是那个display: flex，那咱们就可以用flex-grow: 1。这个flex-grow就像是个魔法棒， 一指，那个mat-tab-body-wrapper就自动填充剩余空间了。是不是很神奇？反正我是觉得挺神奇的，虽然我不懂它到底是怎么工作的。

你看下面这段代码， 更乱，又是flex-basis，又是height， 麻了... 又是::ng-deep。看着就头大。

.left-wrapper {
    flex-basis: 44%;
    display: flex;
    flex-direction: column;
    height: 37rem; /* 父容器高度 */
    /* 使用 ::ng-deep 穿透组件封装， 修改 mat-tab 内部样式 */
    ::ng-deep .mat-tab-body-wrapper {
        height: 37rem; /* 使内容区域包装器占据指定高度 */
    }
    ::ng-deep .mat-tab--tab-body-active {
        height: 37rem; /* 使当前激活的标签页内容占据指定高度 */
    }
}

代码解析与原理

下面我来瞎分析一下这些代码是啥意思，大家别太当真，我也是瞎蒙的。

1. left-wrapper 样式：

   先看这个.left-wrapper。你看它里面写了啥？flex-basis: 44%; 这是啥意思？就是说它占了44%的地方呗？然后display: flex; flex-direction: column; 这就是说它里面的东西要竖着排。 闹笑话。 height: 37rem; 这个最关键，这就是给它定了个死高度，37rem。这个数字怎么来的？我也不知道，可能是随便拍脑袋想出来的吧。反正父容器有了高度，里面的孩子才能长高，对吧？这就跟种树一样，地盘得先划好。

   .left-wrapper {
       flex-basis: 44%;
       display: flex;
       flex-direction: column;
       height: 37rem; /* 父容器具有固定高度 */
   }

   虽然left-wrapper被设置成了display: flex; flex-direction: column; 而且还有个37rem的固定高度， 但是吧，它那个子组件horizontal-tab-group里面的mat-tab内容区域，它可能根本不知道它爹给了它多高的地盘。它就缩在那儿，不肯把地盘占满。后来啊呢，底下就剩了一大块空白，看着真难受。这孩子真是不听话，开倒车。。

2. .mat-tab--tab-body-active：

   没法说。 这个是啥？这个就是当前激活的那个标签页的内容。你看上面那个代码里又给它写了个height: 37rem。为啥要写这个？主要原因是你不写它，它就不高啊！它就那么一点点大。你得强迫它长高，跟它爹一样高。这就像逼孩子长个儿一样，不逼不行。

   下面这个是修正后的CSS样式， 反正就是各种height: 37rem，到处都是37rem，切中要害。。

   .left-wrapper ::ng-deep .mat-tab-body-wrapper {
       height: 37rem; /* 使内容区域包装器占据指定高度 */
   }
   .left-wrapper ::ng-deep .mat-tab--tab-body-active {
       height: 37rem; /* 使当前激活的标签页内容占据指定高度 */
   }

3. ::ng-deep 的替代方案：

   说到这个::ng-deep，真是个让人又爱又恨的东西。Angular官方说这个东西要废弃了不要用了。但是吧，不用它咋办？那个mat-tab的样式都被封装在组件里面了你根本改不了啊！你不用::ng-deep，你怎么去抓那个.mat-tab-body-wrapper？你抓不到它，你就没法改它的高度。所以没办法，只能硬着头皮用。虽然它上面画了个删除线，但是还能用，这就行了。管它废不废弃呢，能跑就行。

   搞一下... 解决这个问题的核心，我觉得就是死磕。你死磕那个mat-tab-body-wrapper和mat-tab--tab-body-active这两个玩意儿。你把它们的高度强行设成跟你父容器一样高，它就没地方躲了。它必须得填满。这样那个底部的空白就没了。虽然这办法挺笨的，但是有效啊。这就叫暴力破解，不懂原理，直接上锤子。

在使用angular material的mat-tab组件的时候， 咱们这些开发者啊，真的是太难了。经常会遇到这个标签页内容区域填不满父容器高度的问题。那个底部的空白，真的是太刺眼了。这通常就是主要原因是那个父容器有了固定高度， 但是mat-tab里面的那些个wrapper啊，body啊，它们没有自动 去占那个空间。它们就懒在那儿。你说气人不气人，整一个...？

.mat-tab-body-wrapper 是个啥玩意儿

这个.mat-tab-body-wrapper， 听着名字就知道，它就是个包装器。它把所有的标签页内容都包在里面。你想让内容高，得先让这个包装器高起来。如果这个包装器是个矮子，那里面的内容再高也没用，会被挡住或者显示不全。所以咱们得先把这个包装器给撑起来。怎么撑？就是上面说的，给它个height: 37rem，或者用flex-grow: 1。反正就是不能让它缩着。

响应式设计？那是啥？

是吧？ 还响应式设计呢，我都快被这高度搞崩溃了哪还有空管响应式啊。不过话说回来如果你用了上面那些办法，把高度都定死了那响应式可能就有点悬了。比如换个手机屏幕，这37rem是不是又太长了或者太短了？哎呀，不管了先解决PC端的问题再说吧。响应式那是以后的事儿，以后再调呗。反正现在那个空白是没了这就胜利了一半了。

挖野菜。 通过上面那些乱七八糟的修改，那个mat-tab的内容区域总算是被强制 到37rem的高度了。那个底部的空白也就没了。页面布局看起来终于像那么回事儿了没那么丑了。虽然代码写得跟屎一样，但是效果达到了嘛。这就行了咱们是程序员，不是艺术家，能跑就行，对吧？

::ng-deep 选择器，黑科技啊

再说说再啰嗦两句这个::ng-deep。这玩意儿真的是黑科技。它能穿透Angular的那个什么ViewEncapsulation，就是那个样式封装。Angular说：“我的样式是私有的，你别动。”::ng-deep说：“我就要动，我偏要动。”然后就进去了。虽然现在大家都说不要用，要用什么别的什么方式，但是我觉得那个别的什么方式更麻烦。还是这个简单，直接三个冒号一打，搞定。虽然控制台可能会给你报个警告，说这个要废弃了你就当没看见就行了。眼不见心不烦，说到底。。

下面再贴一段那个HTML的代码，大家凑合看吧。反正就是那个horizontal-tab-group，然后里面套了一堆ng-template。 也许吧... 这ng-template也是个神奇的东西，平时看不见，用的时候才出来。

你看这个

以及相应的CSS样式， 咱们前面也说了就是那些height: 37rem，::ng-deep那一套。我就不重复贴了贴多了看着也烦，太魔幻了。。

一下

反正吧， 这个Angular mat-tab高度自适应的问题，说难也难，说简单也简单。关键就是你要敢用::ng-deep，你要敢把那个height写死。别管什么最佳实践了能解决问题就是最好的实践。 我emo了。 那个底部的空白太讨厌了一定要把它消灭掉。用flex也好，用calc也好，反正就是要把那个内容区域给它撑起来。

希望我这篇乱七八糟的文章能帮到大家。虽然写得跟没上过学似的，但是道理还是那个道理。大家凑合看吧，别太挑剔了。 中肯。 代码这东西，能跑就行。要是大家还有更好的办法，也欢迎告诉我，虽然我可能也看不懂。就这样吧，拜拜了您嘞！