JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="header">click here to reset</div>
        <div id="banner-region">click here to add content</div>
        <div id="navigation"></div>
        <div id="content">
            <div id="container">
                <p>This div should extend all the way down to the bottom and touch the footer</p>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>

CSS

html, body {
    height:100%;
    min-height:100%
}
body {
    margin: 0;
    padding: 0;
}
#header {
    border-bottom: 5px solid #a4a4a6;
    height:35px;
    background-color:gray;
}
#banner-region {
    height:94px;
    background-color: bisque;
}
#footer {
    height:93px;
    background-color:khaki;
}
#content {
    background-color: white;
    padding-top: 23px;
    padding-bottom: 23px;
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
#container {
    background-color:yellow;
    /*height:253px*/
}
#wrapper {
    min-height: 100%;
    margin-bottom: -93px;
}
#wrapper:after {
    content:"";
    display: block;
    height:93px;
}
#footer {
    height: 93px;
}

JavaScript

var orig = $("#container").html();
$("#banner-region").on("click", function () {
    $("#container").append($("#container").html());
});
$("#header").on("click", function () {
    $("#container").html(orig);

});