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;
}
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
vh
is pretty much a fixed value on mobile devices with or without the onscreen keyboard, or toolbars which appear and disappear differently across platforms. Be cautious of this and that if you expectvh
to be truly dynamic it may not be. % actually often works better here.