JSFiddle - React, Tailwind, and code Playground

by Kostia_Ivashchenko

HTML

<div class="div100percents">
    <div class="divGlobalHeader">
        Header
    </div>
    <table style="height: 100%;">
        <tr>
            <td>
                <div class="divMain">
                    Content
                </div>
            </td>
        </tr>
    </table>
    <div class="divGlobalFooter">
        Footer
    </div>
</div>

CSS

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

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

.divGlobalFooter {
    position: relative;
    width: 100%;
    height: 36px;
    vottom: 0;
    background: #fef;
}

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

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