Dynamically size table based on screen size for web app

Here is my layout

• Container DIV -- Header Section --Content Section --Footer Section (containing a toolbar)

Container DIV is set to display flex - Column. Content section is set to flex 1. Header and Content sections are sized by their content and padding.

Content Section contains a table with dynamically generated content with varying number of rows.

The table needs to fit exactly between the header and footer with no vertical scrolling. I wrote a function to get the height of the content div, and then set the height of the table cell based on the number of rows resulting from the dynamic content.

The method I use seems a bit crude to me, and I wondering if there is a better, elegant, more professional way to do this. I am also interested in being able to pause or load a spinner while the dimensions of the content section div is determined by the JavaScript code.

Thank you.