JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <header>header</header>
    <div class="floater"></div>
    <section>content</section>
    <div class="push"></div>
</div>
<footer>footer</footer>

CSS

* {
    margin: 0;
}

html, body {
    height: 100%;
    background: #ccc;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
    background: #777;
}

header {
    background: pink;
    height: 50px;
}

footer, .push {
    height: 50px;
}

footer {
    background: yellow;
}

.floater {
    position: relative;
    float: left;
    height: 50%;
    margin-bottom: -75px;
    margin-top: -50px;
    width: 1px;
    background: yellowgreen;
}

section {
    position: relative;
    clear: left;
    width: 300px;
    height: 150px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #666;
}