Trouble with container height = 100% not working - Angular/Material

Question

I am creating a mockup for a new UI using Angular and Material design elements, however I am experiencing trouble attempting to get the area underneath my toolbar to take up the remaining vertical height of the page.

Here is a link to my code example

I have Googled the problem and the only thing I have seen is the solution to set

html, body {
    height: 100%;
}

However I have not found this to be a solution. I was thinking of perhaps using a flex box, but I am unfamiliar with how they are used.

Any help would be appreciated.

UPDATES & SOLUTION I opted not to go the flexbox route as I was wanting something quick as a solution and flexbox can be something I look more into in the future.

After deciding that I wanted a static nav bar, of which was not occurring when first coded, I set upon using a CSS calculation to utilise height: 100vh and subtract the overhang that this caused.

mat-sidenav-container {
    height: calc(100vg - 64px);
}

I found however, that when shrinking the size of the window, the responsive nature of the material elements meant that the toolbar would reduce in height somewhat. This led to a blank bar below the page content as the amount to subtract would need to be less in this situation.

The fix for this was to add an @media change for the specific page width the shrinking is triggered. I was then eventually left with the following:

mat-sidenav-container {
  height: calc(100vh - 64px);
}

@media (max-width: 600px) {
    mat-sidenav-container {
        height: calc(100vh - 56px)
    }
}

This may not be the best solution for the problem, but so far I have found this to be one solution that works.

Answer 1

Ok, here is what worked for me in with the code you gave me:

I added the style="height:100%" to the following classes:

html, blitz-app, to the secondary div and to the mat-sidebar-container

Edited: Changed the style of the html tag to: height:calc(100% - 64px); Reason: the 64px is the height of the toolbar

I added it all in the chrome browser debugging console, because I couldn't find the actual classes the code is using, but I am sure you can :)

Hope I could help.