angular material 6 sidenav use 100% page height / mat-table scroll

Question

Hi I'm fighting now for hours with css - I hope you can help me:

I try to set my to fixed 100% height. The child mat-table should than also resize and not extend above 100% age size if it has more data rows. (mat-table now supports scrolling and sticky header and footer rows. This is why I like to give my SPA a new design)

Here is an example how it should look: https://stackblitz.com/edit/ng-fullpage-scrolltable but this has a fixed setting .mat-table { height: 400px;} (and the mat-table nicely scroll if more than 5 items are displayed)

How can i make this height (or better the height of the whole mat-sidenav-container or body expand to 100%

Answer 1

Use

.mat-table {
  height: calc( 100vh - 250px);
  overflow: auto; 
  width: 100%;
}

I tried id in your stackblitz and worked