使用flex-layout填充Angular Material 2选项卡

Question

我尝试使用Angular Material 2和flex-layout创建标签式应用。我无法弄清楚如何让标签的内容扩展以填满屏幕。

这就是我所看到的：

我的布局代码如下，包括工具栏和页脚。

<div fxFlex fxLayout="column">

  <md-toolbar color="primary">
    Toolbar
  </md-toolbar>

  <md-tab-group>

    <md-tab label="Tab 1">
      <div fxFlex fxLayout="column" style="background-color:lightblue;padding:10px">
        <div style="background:lightgreen;">This should stay as it is</div>
        <div fxFlex style="background:lightgray;">This should expand so it fills the majorty of the screen</div>
      </div>
    </md-tab>

    <md-tab label="Tab 2">
      <h1>some content page 2</h1>
    </md-tab>

    <md-tab label="Tab 3">
      <h1>some content page 3</h1>
    </md-tab>

  </md-tab-group>

  <div>Footer</div>
</div>

我已将fxFlex放置在不同位置并创建额外的div容器，但都没有成功。任何想法我应该做什么？

在此创建的Plunkr：http://plnkr.co/edit/eU413bX36I6aZFRTs6cg?p=preview

Answer 1

这是您需要执行的操作，以获取材料标签内容，其中包含div.mat-tab-body-content全高度示例：

1. 当您html / body设置为100%时，<material-app>未展开到最高位置。在链接的组件样式表中使用:host { min-height: 100vh; }，确保它扩展到全高
2. 使用div.mat-tab-body-wrapper并包装所有标签内容时生成的<md-tab>也会出现类似问题。在组件样式或全局某处使用CSS（例如style.css）时，需要将其设置为flex: 1;，这将使剩余空间尽可能多。 height: 100%;也可以。
3. 最后，div内没有上课的第一个/孩子div.mat-tab-body-content需要height: 100%;才能占用剩余的高度，因为它的所有父母都有，包括div.mat-tab-body-wrapper和div.mat-tab-body正在伸展到全高。

使用这种方法，它应该适应动态工具栏和页脚大小。

希望这有帮助！

Answer 2

使用标签组的最小高度，以防所有标签需要相同的高度

<md-tab-group style='min-height:800px;'>