JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">
        <div class="holder">
            <p>Footer at bottom + PNG background stretches to a height of content</p>
        </div>
    </div>
    <div id="main">
        <div class="container">
            <p>Footer at bottom + PNG background stretches to a height of content</p>
            <p>Footer at bottom + PNG background stretches to a height of content</p>
            <p>Footer at bottom + PNG background stretches to a height of content</p>
            <p>Footer at bottom + PNG background stretches to a height of content</p>
        </div>
    </div>
    <div id="footer">
        <div class="holder">
            <p>Footer at bottom + PNG background stretches to a height of content</p>
        </div>
    </div>
</div>

CSS

html { height: 100%; }
body {
    margin: 0;
    font: 30px/80px Georgia, "Times New Roman", Times, serif;
    color: #333;
    height: 100%;
    background: url(http://i.minus.com/iVifDQgEC40jO.gif);
}
#wrapper {
    display: table;
    margin: 0 auto;
    height: 100%;
    width: 900px;
}
#header {
    display: table-row;
    width: 100%;
    background: url(http://i.minus.com/ijKzjcRLvE36z.png) no-repeat;
}
#header .holder {
    height: 100px;
    display: table-cell;
    position: relative;
}
#footer {
    display: table-row;
    width: 100%;
    background: url(http://i.minus.com/iAbX2croTDVNN.png) no-repeat;
}
#footer .holder {
    height: 100px;
    display: table-cell;
    position: relative;
}
#main {
    display: table-row;
    background: url(http://i.minus.com/iblUZIV63D0Pj3.png) repeat-y;
}
.container {
    display: table-cell;
    position: relative;
    width: 100%;
}
/* FOR IE6/7 */
/*
* html #header {
    background: none;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='http://i.minus.com/ijKzjcRLvE36z.png', sizingmethod='crop');
}
* html #footer {
    background: none;
    filter: progid:dximagetransform.microsoft.alphaimageloader(src='http://i.minus.com/iAbX2croTDVNN.png', sizingmethod='crop');
}
* html #main {
    background: none;
    filter: progid:dximagetransform.microsoft.alphaimageloader(src='http://i.minus.com/iblUZIV63D0Pj3.png', sizingmethod='scale');
    height: expression(document.documentElement.clientHeight - document.getElementById("header").clientHeight - document.getElementById("footer").clientHeight + "px");
}
*+html .container { min-height: expression(document.documentElement.clientHeight - document.getElementById("header").clientHeight - document.getElementById("footer").clientHeight + "px"); }
*/