Angular Material 选项卡高度

Question

我正在尝试拥有一个整页的 Angular Material 选项卡，其中包含全高选项卡并具有居中消息。我创建了 this stakblitz因为我无法让它工作。 fxFill 似乎没有填充，我不确定这是 Flexbox 布局还是 Angular Material 的问题。我不想在每个选项卡中强制设置高度，因为这似乎违背了灵活布局的要点。

我确信它很简单，但可以帮助那些习惯了 Bootstrap 网格的可怜的困惑的开发人员 :)

更新将 height: calc(100vh - 100px); 添加到父 div，然后再添加到 tall.component div 可以使事情正常进行，但是这肯定是一个糟糕的解决方案

Answer 1

为了填充页面，页面需要填充窗口:

样式.css

body, html{
  height: 100%;
  margin: 0;
}

应用组件需要填充主体:

app.component.css

:host{
  box-sizing: border-box;
  display: block;
  height: 100%;
}

默认情况下，标签中内容的包装器未填充标签的高度，因此我们将解决此问题:

样式.css

.mat-tab-body-wrapper{
  flex-grow: 1;
}

我们还需要让 mat-tab-group 填充高度，它的父级也需要填充高度，所以我们会给包装器和标签组一个 id。

app.component.html

<div id="wrapper"> <!-- give it an id -->
    <div fxLayout="row" fxLayoutGap="16px" fxFill>
        <div fxFlex="20">
            <p>Fun Sidebar</p>
        </div>
        <div fxFlex="80" fxFill>
            <mat-tab-group id="tab-group"> <!-- give it an id -->
                <mat-tab label="Summary">
                    <div fxFlex style="padding: 16px;">
                        <div class="mat-display-2">Hello</div>
                        <p>Lorem ipsulem</p>
                    </div>
                </mat-tab>
                <mat-tab label="Tall content">
                    <app-tall-component></app-tall-component>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</div>

app.component.css

#wrapper{
  padding: 16px; 
  min-height: 100%; 
  height: 100%; 
  box-sizing: border-box;/*new*/
}
#tab-group{
  height: 100%;
}
#tab-group mat-tab-body {
  flex-grow: 1;
}

---

https://stackblitz.com/edit/angular-awamwn?file=src%2Fapp%2Fapp.component.html