JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="page-wrapper">
        <div class="top-nav-bar clear-fix">
            <ul>
                <li><button id="less">Remove stuff</button></li>
                <li><button id="more">Add stuff</button></li>
            </ul>
        </div>
        <div class="header">
            <h1>My Web Application</h1>
        </div>
        <div class="foo">
            <div class="content">
                <p>This is my content.</p>
                <p>I would like this section to expand to fill all
                    available space down to the footer, and if necessary
                    expand further pushing the footer off the bottom of                     the page and creating a scroll bar.</p>
                <p class="stuff">Extra content</p>
            </div>
        </div>
        <div class="push">
        </div>
    	<div class="footer">
        	This is my footer.
   		</div>
    </div>

</body>

CSS

html,body { height: 100%; }
.page-wrapper { 
    position: relative; 
    width: 500px; 
    height: auto !important;
    margin: 0 auto -30px; 
    min-height: 100%; 
}
.footer, .push { height: 30px; }
.footer { width: 100%; margin: 0 auto; position: relative; }
.top-nav-bar li { float: right; padding-left: 10px; }
.clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
button { font-size: 0.7em; }

.page-wrapper { background:#eee; position:relative;}
.top-nav-bar, .header, footer{ height: 5%;}
.top-nav-bar { background:#cff; margin-bottom: 50px; }
.header{ background:#efdd00;}
.foo { overflow-y:scroll; position:absolute; left:0; top:10%; width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

JavaScript

$(function() {
    $("#more").click(function() {
    	$(".stuff").first().clone().appendTo($(".content"));
    });
    $("#less").click(function() {
        if ($(".stuff").length > 1)
        	$(".stuff").last().remove();
    });
});