Having some trouble creating a new UI mockup using Angular and Material design elements. I can't seem to get the area below my toolbar to fill the remaining vertical height of the page.
Check out my code example here
Despite setting html, body { height: 100%; }, it hasn't solved the issue. I've considered using flexbox but I'm not very familiar with it.
Any assistance would be greatly appreciated.
UPDATES & SOLUTION
Decided against using flexbox as a quick fix, opting for a CSS calculation instead by utilizing height: 100vh and adjusting for any overlap.
mat-sidenav-container {
height: calc(100vg - 64px);
}
Noticed that when resizing the window, the responsive nature of the material elements causes the toolbar height to shrink, leaving a blank space below the content. Added a media query to account for this scenario:
mat-sidenav-container {
height: calc(100vh - 64px);
}
@media (max-width: 600px) {
mat-sidenav-container {
height: calc(100vh - 56px)
}
}
This might not be the most optimal solution, but it's the one that seems to work for now.