JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
        <div class="content">
            <div class="longcontent">
                longcontent
             </div>
           normal content
        </div>
        <div class="header">
            Some header
        </div>
        <div class="footer">
            Some footer
        </div>
    </div>
</body>

CSS

* {
        padding: 0;
        margin: 0;
}

html, body {
        min-height: 100%;
        height: 100%;
        min-width: 100%;
        width: 100%;
}

html {
        overflow: hidden;
}

body {
        overflow: auto;
        background-color: #eeeeee;
}

.wrapper {
        background-color: #eeeeee;
        position: relative;
        padding: 3.275em 0px 3.275em 0px;
        display: inline-block;
        min-width: 100%;
        height: auto !important; /* ie 6 will ignore this. */
        height: 100%; /* ie 6 will use this as min-height. */
        min-height: 100%; /* all other will use this. */
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: visible;
}

.header {
        position: absolute;
        top: 0em;
        right: 0px;
        left: 0px;
        display: block;
        background: #ccc;
}

.header, .footer {
        height: 1.3em;  
        padding: .247em;
        border-top: .247em double black;
        border-bottom: .247em double black;
        text-align: center;
        background: #ccc;
}

.footer {
        position: absolute;
        bottom: 0px;
        right: 0px;
        left: 0px;
        overflow: visible;
}

.longcontent {
        width: 1000px;
        background: #555;
}