JSFiddle - React, Tailwind, and code Playground

by bg100

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="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 class="push">
        </div>
    </div>
    <div class="footer">
        This is my footer.
    </div>
</body>

CSS

html,body { height: 100%; }
.page-wrapper { 
    position: relative; 
    width: 300px; 
    height: auto !important;
    margin: 0 auto -30px; 
    min-height: 100%; 
}
.footer, .push { height: 30px; }
.footer { width: 300px; 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 { border: 1px dashed #a0a0ff; }
.top-nav-bar { border: 1px dashed #a0a0ff; }
.header { border: 1px dashed #a0a0ff; }
.content { border: 2px solid red; }
.push { border: 1px dashed #ffa0a0; }
.footer { border: 1px dashed #ffa0a0; }

JavaScript

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