JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer">footer</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
.header, .footer {
    position: fixed;
    width: 100%;
    height: 48px;
    left: 0;
    background: lightgreen;
}
.footer {
    bottom: 0px;
}
.content {
    min-height: 100%;
    background: lightblue;
    padding: 48px 0 48px 0;
}