JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="header">header</div>
    
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Odit, facere saepe odio error necessitatibus fugiat officia
        enim iusto culpa mollitia voluptas ipsam voluptates ratione.
        Saepe odit tempore quos quia tenetur.
    </div>
    
    <div class="footer">footer</div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}

.main {
    display: table;
    
    width: 100%;    
    height: 100%;
}

.header,
.footer {
    display: table-row;
    
    height: 60px;
    
    background: #aaa;
    line-height: 60px;
}
.content {
    display: table-cell;
    
    background: #ddd;
}

@supports (display: flex) {
    
    .main {
        display: flex;
        flex-direction: column;
        
        height: auto;
        min-height: 100%;
    }

    .header,
    .content,
    .footer {
        display: block;
    }
    
    .content {
        flex-grow: 1;
    }
    
}