How to make the footer stay at auto position with respect to component's height?

I want to keep the footer component at the end of my router-outlet. Problem is when using this code

:host {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

the footer stays at the bottom but acts as fixed footer. But I want the footer to change its position w.r.t. the router-outlet's size. Changing to position: relative makes it go down and I have to scroll down. The below picture will give the detail about this:

You can see the page gone down.

My responsive topbar component has the following code:

.mat-toolbar {
  height: 7vh;
  background-color: white;
}

.mat-sidenav-container {
  background-color: white;
  height: 93vh !important;
  z-index: 0 !important;
}

What I am thinking is that probably the height of mat-sidenav-container is creating the problem. Please help me out in this scenario. This is my sample example

from How to make the footer stay at auto position with respect to component's height?