JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html {
    font-size:100.01%;
    height:100%;
}
body{
    margin:0;
    font:62.5% Arial,sans-serif;
    height:100%;
}
#wrapper{
    height:100%;
    width:800px;
    margin:0 auto;
    font-size:1.4em;
    display:table;
    background:#0c6;
}
#content {
    width:100%;
    display:table-row;
}
#content .holder {
    display:table-cell;
    vertical-align:middle;
}
#content .frame{
    margin:0 0 100px;
    overflow:hidden;
    width:100%;
    background:#069;
}
#footer {
    width:800px;
    background:#f00;
    height:100px;
    margin:-100px auto 0;
    overflow:hidden;
}
/* FOR IE6/7 */
/*
#wrapper {
    height:auto;
    min-height:100%;
}
* html #wrapper {height:100%;}
#content {margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0");}
*/