JSFiddle - React, Tailwind, and code Playground

HTML

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

CSS

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}
section {
    height: calc(100% - (100px + 150px));
    background: tomato;
}
footer {
    height: 150px;
    background-color: blue;
}