JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="header">
		<div class="inner">Header</div>
	</div>
	<div class="content">
		<div class="inner">Content</div>
	</div>
	<div class="footer">
		<div class="inner">
            Footer<br>
            Footer<br>
            Footer<br>
            Footer
        </div>
	</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.header,
.content,
.footer {
    display: table-row;
}

.inner {
    display: table-cell;
}

.header {
    background: lightBlue;
}

.header,
.footer {
    height: 50px;
}

.footer {
    background: silver;
}