角度材料选项卡的高度 [英] Angular Material tab height

问题描述

我正在尝试使用一个整页的角度材料"选项卡，该选项卡具有全高且具有居中消息的选项卡.我创建了此问题，因为我无法正常工作. fxFill似乎无法填充，我不确定这是否与Flexbox布局或Angular Material有关.我不想在每个选项卡中都设置一个高度，因为这似乎使灵活的布局无法实现.

I am trying to have a full page Angular Material tab which has tabs which are full height and have a centered message. I have created this stakblitz as I can't get it to work. The fxFill's don't seem to Fill and I am not sure if this is an issue with the Flexbox layout or Angular Material. I don't want to force a height as within each tab as that seems to defeat the point of flexible layouts.

确定它简单但可以帮助习惯于Bootstrap网格的可怜的困惑开发人员:)

Am sure its simple but help a poor confused developer who is used to Bootstrap grid :)

更新 将 height:calc(100vh-100px); 添加到父div，然后再添加到tall.component div可以使事情工作，但是 确定这是一个不好的解决方案

UPDATE Adding height: calc(100vh - 100px); to the parent div and then also to the tall.component div makes things work but surely this is a bad solution

推荐答案

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

In order to fill the page, the page needs to fill the window:

styles.css

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

应用程序组件需要填充正文:

The app component needs to fill the body:

app.component.css

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

默认情况下，选项卡中内容的包装不会填充选项卡的高度，因此我们将解决此问题:

By default the wrappers of the content within the tabs are not filling the tab's height so we will fix this:

styles.css

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

我们还需要使mat-tab-group填充高度，其父级也需要填充高度，因此我们将为包装器和选项卡组都提供一个ID.

We also need to have the mat-tab-group fill the height, its parent needs to fill the height too, so we will give an id to both the wrapper and the tab-group.

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

这篇关于角度材料选项卡的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！