JSFiddle - React, Tailwind, and code Playground
HTML
<button id="add">Add Content</button>
<div class="content">
<p>Main content goes here.</p>
</div>
<footer class="smallFooter">
<p>Footer content goes here</p>
</footer>
CSS
html, body {
height: 100%;
}
body {
display: table;
width: 100%;
}
.content {
display: table-row;
height: 100%;
}
.smallFooter {
display: table-row;
height: 1px;
}
JavaScript
$("#add").on("click", function() {
$("<p>Main content goes here.</p>").appendTo(".content");
});