JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div100percents">
    <div class="divHeader">
        Header
    </div>
    <table style="width: 100%; height: 100%;">
        <tr style="background: #fef; height: 36px;">
            <td>
                Header
            </td>
        </tr>
        <tr>
            <td style="background: #ffe; height: 100%;">
                     <div class="divSubHeader"> 
                     <div class="divMain">
                         Content
                     </div>
            </td>
        </tr>
        <tr style="background: #fcf; height: 36px;">
            <td>
                Footer
            </td>
        </tr>
    </table>
</div>

CSS

.div100percents {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}

.divMain {
    position: relative;
    width: 200px;
    min-height: 100%;
    margin: 0 auto;
    background: #eff;
}

body, table, tr, td {margin 0; padding 0;}