Prevent div from expanding vertically, give it scrollbar

Question

Refer to the following fiddle: https://jsfiddle.net/537w3qsn/

Here's what I want:

• The header and footer should remain visible on the page at all times.
• The body (green div in the middle) should get a vertical scrollbar if it would otherwise cause content to overflow. It should not grow too much and push the footer off-page.
• The layout should be fluid. The modal should take up the whole screen.
• Please only use javascript as an absolute last resort.
• Otherwise, feel free to modify the HTML and CSS however you'd like to achieve the same effect.

Sample CSS:

.modal {
    padding: 0px;
    background-color: #ff6666;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.body {
    overflow: auto;
    background-color: #b3ff66;
}

.dialog {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #66ffff;
}

.content {
    height: 100%;
    border-radius: 0px;
    background-color: #b266ff;
}

Sample HTML:

<div class="modal">
    <div class="dialog">
        <div class="content">
            <div class="header">
                <h4>Header</h4>
            </div>
            <div class="body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Test</th>
                            <th>Test</th>
                            <th>Test</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- LOTS OF CONTENT HERE -->
                    </tbody>
                </table>
            </div>
            <div class="footer">
                This is the footer.
            </div>
        </div>
    </div>
</div>

Answer 1

Another solution (non-flexbox):

CSS (based on classes in your question)

    * { 
        margin:0; padding:0; 
    }

    .modal, .dialog, .content {
        height: 100vh;
    }

    .header {
        position: relative;         
        height: 15%;
        background-color: purple;           
    }

    .body {
        position: relative;
        height: calc( 100vh - 30%);
        overflow: auto;         
        background-color: #b3ff66;  
    }

    .footer {
        position: relative;         
        height: 15%;
        background-color: red;          
    }       

JSfiddle: https://jsfiddle.net/537w3qsn/3/

Answer 2

You could use flexbox to distribute the height.

/* Create a vertical flexible container */
.modal {
  display: flex;
  flex-direction: column;
}

/* Every child will fit their content, but .body will take the remaining space */
.body {
  flex: 1;
}

You can see an example here: https://jsfiddle.net/tzi/ud4zsn2e/

Answer 3

Fiddle

In my fiddle you'll see that everything is fluid and responsive.

The main code to use is this:

.footer {
position: fixed;
bottom: 0;
}

You'll see in the fiddle that it should all work as you want :).