在Angular 2 Material中将md-tab-group body min height更改为0答案

【问题标题】：Change md-tab-group body min height to 0 in Angular 2 Material在Angular 2 Material中将md-tab-group body min height更改为0
【发布时间】：2016-06-27 20:34:21
【问题描述】：

这里是使用 Angular 2 Material md-tab-group 组件的a plunker demo。

基本上就是这样

<md-tab-group>
    <md-tab>
        <template md-tab-label>Tab</template>
        <template md-tab-content>
            <md-content class="md-padding">
                <p>200 px height</p>
            </md-content>
        </template>
    </md-tab>
</md-tab-group>

呈现到具有 200 像素高度的主体的选项卡。它使用 flex 布局，我无法从源代码中找到如何更改最小高度。其实这个风格是为md-tab-group列出的：

[_nghost-vvf-2] {
    display: flex;
    flex-direction: column;
    font-family: Roboto,"Helvetica Neue",sans-serif;
    min-height: 248px;
}

如何正确地将md-tab-group 的最小高度恢复为0？而这个min-height 是从哪里来的？

问题似乎是2.0.0-alpha.5 和2.0.0-alpha.5-2 所特有的，它没有出现在master 中。

【问题讨论】：

看看这行github.com/angular/material2/blob/2.0.0-alpha.5/src/components/…通知标签alpha.5
@yurzui 最明显最合理的解释，谢谢！我记下了masters。通常我克隆它们来检查代码，它们至少让我失败了一次。

标签： css angular flexbox material-design angular2-material

【解决方案1】：

如果你注意到了，'md-tab-label' 的子级声明了 48px 的高度

.md-tab-label[_ngcontent-rru-2] { 行高：48px；高度：48px；}
所以剩余的高度（200px）由“md-tab-content”获取。
您可以在应用 CSS 文件中将“md-tab-group”的最小高度覆盖为零。（阅读 CSS 特性）

【讨论】：

【解决方案2】：

组件样式属性中可以恢复最小高度；

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styles: [`
md-tab-group {
  background:#fff;
  min-height:0;
}
  `],
  directives: [MD_TABS_DIRECTIVES]
})

【讨论】：