JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div100percents">
    <div class="divMain">
         <table>
             <tr><td class="rowSubHeader">
             </td></tr>
             <tr><td>
                 Content
             </td></tr>
        </table>
    </div>
    <div class="divHeader">
        Header
    </div>
    <div class="divFooter">
        Footer
    </div>          
</div>

CSS

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

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

.rowSubHeader {
    height: 36px;
}

.divHeader {
    position: absolute;
    width: 100%;
    top: 0;
    height: 36px;
    background: #fef;
} 

.divFooter {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 36px;
    background: #fef;
}

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