Slide a div from the bottom underneath another div with angular animations - html

Question

As you can see in the screenshot below, I hava a tab on the bottom of my page. When I click on it, I want it to slide underneath the <div> containing "Test" using angular animations. The problem is, that the pagesize should be responsive and therefore I cannot use px-values. I tried percentage as well, but that value refers to my tab-div, not the overall height.
Screenshot
My component:
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
animations: [
trigger('tabState', [state('default', style({
transform: 'translateY(0)'
})
),
state('open', style({
transform: 'translateY(-100%)'
})),
transition('default <=> open', animate(500))
])
]})
export class TestComponent {
state = 'default';
onComeIn() {
this.state === 'default' ? this.state = 'open' : this.state = 'default';
}
}
My HTML:
<div class="mainContainer">
<mat-toolbar color="primary">
<div class="d-flex align-items-center justify-content-between">
<span>Test</span>
</div>
</mat-toolbar>
<div class="mainContentContainer">
<div class="d-flex flex-column" style="height: 100%">
<div>content</div>
<div class="mt-auto">
<div class="tabContainer" [#tabState]="state">
<div class="tab" (click)="onComeIn()">Tab</div>
</div>
</div>
</div>
And finally the css:
.tab {
box-sizing: border-box;
height: 4.2em;
width: 33%;
background-color: white;
padding: 1em 1.2em 0.45em 1.2em;
border-radius: 0.5em 0.5em 0 0;
box-shadow: 0 0.05em #b7b7b7;
}
.mainContainer {
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mainContentContainer {
flex: 1;
background-color: #455864;
}

Answer 1

The issue is more about css :
I changed the initial value of the tabContainer class to this :
.tabContainer {
position: fixed;
bottom: 0;
width: 100%;
}
Then in the animation definition, removed the bottom and added the top one :
state('open', style({
bottom: 'initial',
top: '20px'
})),
Here is the running example in editor.