Dynamically size table based on screen size for web app

Question

html {

    height: 100%;
}

body {
    
    min-height: 100vh;
    min-height: -webkit-fill-available;/*only thing so far that makes the footer section visible */
    width: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
}

.main-container {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-section {
    overflow-x: scroll;
    flex: 1;
    padding: 0;
    margin: 0;
}

table.table {
    table-layout: fixed;
    min-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no viewport-fit=cover">
    <title>Document</title>
</head>
<body>
    <div class="main-container">
        <div class="header-section"></div>
        <div class="content-section">
            <table class="table">
                
            </table>
        </div>
        <div class="footer-section"></div>
    </div>
</body>
</html>

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.

EDIT: JavaScript included:

function setDimensions () {
            const main = document.querySelector('.content-section');
            const theight = main.getBoundingClientRect().height;
            const rows = Array.from(document.querySelectorAll('tr'));

            const rowCount = rows.length;
            const heightWidth = theight / rowCount;
        
            rows.forEach(row => {
                let cheight = 0;
                cheight = `${heightWidth}px`;
                row.style.height = cheight;
                Array.from(row.cells).forEach(cell => {
                    if(cell.cellIndex === 0) cheight = `${heightWidth*2.295}px`;
                    else if(cell.classList.contains('sum')) cheight = `${heightWidth*1.25}px`
                    else cheight = `${heightWidth}px`;
                    cell.style.width = cheight;
                })
            })
        }

Thank you.

I have bookmarked in hope that someone more experienced with CSS will come along and provide a nice neat solution for this but based on my rather limited knowledge it seems that perhaps what you might want to do is wrap it in a div that you then set to be the maximum height of what is left. Something like perhaps [this article](https://softauthor.com/css-make-a-div-height-full-screen/) explains. Again, I am not an expert but I am interested to know how this is done so if you figure out please let me know. If not I hope some wizard comes by and answers this question for you. Best of luck! — Johan Jarvi, May 31 '21 at 03:06
I suggest adding the code you have and anything you have tried to accomplish what you are asking... This will help to ensure you do not get negative impact from the SO community, — dale landry, May 31 '21 at 03:06

Dynamically size table based on screen size for web app

0 Answers0