How can I extend the main-content of my webapp (between the header and the footer)?

Question

I have this layout in a component:

<app-header *ngIf="showHeaderFooter"></app-header>
<div class="main-content">
<router-outlet></router-outlet>
</div>
<app-footer class="soft" *ngIf="showHeaderFooter"></app-footer>

And its scss:

.main-content {
    min-height: 100vh;
    height: auto;
}

When I start the webapp, there is a lot of space under the main-content and I would like to delete it. There is the div.container of the component but it doesn't fit the entire div.main-content. Help me!

I tried to modify the scss of div.main-content into this:

.main-content {
    min-height: 100vh;
    height: 100%; /* this */
}

But when I switch into mobile view the footer compenetrate the content of the main-content.