JSFiddle - React, Tailwind, and code Playground

by sgospodarets

HTML

<div id="wrapper">
    <div id="header">
        header
    </div>
    <div id="content">
        <div class="holder">
            <p>Footer at bottom: Flexible Footer Height &amp; Vertical Alignment Middle for content</p>
            <p>Footer at bottom: Flexible Footer Height &amp; Vertical Alignment Middle for content</p>
            <p>Footer at bottom: Flexible Footer Height &amp; Vertical Alignment Middle for content</p>
        </div>
    </div>
    <div id="footer">
        <div class="holder">
            <div class="frame"> 
                <p>Footer at bottom: Flexible Footer Height</p>
                <p>Footer at bottom: Flexible Footer Height</p>
                <p>Footer at bottom: Flexible Footer Height</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;
}
#header{
    display:table-header-group;
    background: #ff0;
}
#content {
    width:100%;
    display:table-row;
    background:#0c6;
}
#content .holder{
    display:table-cell;
    vertical-align:middle;
    
}
#footer {
    width:100%;
    overflow:hidden; /* for old FF on Windows 7 */
    display:table-footer-group;
    background:#f00;
}
#footer .holder {
    height:1%;
    display:table-row;
}
#footer .frame { display:table-cell;}