JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="content">
        <div class="holder">
            <div class="frame">
            <p>Footer at bottom: Flexible Footer Height & Vertical Alignment Middle</p>
                <p>Footer at bottom: Flexible Footer Height & Vertical Alignment Middle</p>
                    <p>Footer at bottom: Flexible Footer Height & Vertical Alignment Middle</p>
                        <p>Footer at bottom: Flexible Footer Height & Vertical Alignment Middle</p>
                            <p>Footer at bottom: Flexible Footer Height & Vertical Alignment Middle</p>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="holder">
            <div class="frame">
                <p>Footer at bottom: Flexible Footer Height & Vertical Alignment Middle</p>
            </div>
        </div>
    </div>
</div>

CSS

html,body {
    font-size:100.01%;
    height:100%;
}
body{
    margin:0;
    color:#000;
    font:62.5% Arial,sans-serif;
    background:#fff;
}
#wrapper{
    width:800px;
    height:100%;
    display:table;
    margin:0 auto;
    font-size:1.4em;
}
#content {
    width:100%;
    display:table-row;
    background:#0c6;
}
#content .holder {
    display:table-cell;
    vertical-align:middle;
}
#content .frame{
    background:#006699;
    overflow:hidden;
}
#footer {
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    background:#f00;
}
#footer .holder {
    height:1%;
    display:table-row;
}
#footer .frame { display:table-cell;}
/* FOR IE6/7 */
/*
#content{min-height:100%;}
* html #content { height:100%;}
#content .holder {padding-bottom:expression(document.getElementById("footer").offsetHeight + "px");}
#content .frame {margin-top:expression((this.parentNode.parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
#footer{
    position:relative;
    margin-top:expression(- this.offsetHeight + "px");
}
*/