Fixed height container with scrolling that resizes based on the window height

Question

I have an Angular Material table where I want the header and footer to be sticky and the content to scroll. To do this I simply need to put the table in a container, set the height to a certain amount of pixels, then set the overflow to auto. This works as intended. I just need something like this to work for multiple resolutions. If I set my div to 600px it looks great on my computer but someone else would see a double scroll bar.

As mentioned if I set the height to a fixed amount of pixels that works great (eg: height: 600px). I've tried using the calc function(eg: height: calc(100%-200px)) but that doesn't seem to work, the table just takes up all the room.

I have done a bunch of media queries at 10px intervals and set the fixed height in each one. This works but seems like a terrible solution.

I feel like there has to be a way to set a fixed container to have a height that is the screen height minus a certain amount of pixels (to account for the header and some white space at the bottom).

Answer 1

Use vh rather then %

height: calc(100vh-200px)