Layout two demos from material-ui documentation

Question

I'm trying to combine two demos from material-ui documentation.

• Clipped under the app bar - This is the page layout
• Fixed header - This is a table with a fixed header.

I want the table to take all the available page height, but still have a fixed header.

The problem is that the "fixed-header" table on the right side, doesn't stick its header, there's a page scrollbar and the header scrolls up with the page. unless I'm adding a maxHeight to the table (Similar to the original "Fixed header" demo). BUT, with maxHeight I can't fit the table to the full page height...

Here's a CodeSandbox demonstrating the problem.

Answer 1

To use this position: sticky property, the parent element must have a defined height.

In your case it is possible to define something as height: 100vh.

See index.html

https://codesandbox.io/s/material-demo-v44v6

Demo working

https://v44v6.csb.app/

<style>

       .makeStyles-tableWrapper-130{
          height: calc(100vh - 84px);
        }
        .makeStyles-content-5{
          padding: 24px 24px 0;
          flex-grow: 1;
          height: auto;
          box-sizing: border-box;
        }

</style>