4

我正在尝试使用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

4

2 回答 2

4

这是获取材料选项卡内容所需执行的操作，该内容在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正在伸展到全高。

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

希望这会有所帮助！

于 2017-07-21T14:44:02.647 回答
0

如果您需要所有选项卡的高度相同，请为选项卡组使用最小高度

<md-tab-group style='min-height:800px;'>
于 2017-10-09T08:54:34.163 回答