JSFiddle - React, Tailwind, and code Playground
HTML
<header>Header Strip</header>
<div class="container">
<div class="content">
<div class="contentinner">
<p>THIS IS WHERE THE CONTENT GOES</p>
<p><a href="http://traceyspencer.blogspot.co.uk/2012/04/css-sticky-header-and-footer-with.html" target="_blank">CLICK HERE for an explanation of this page</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus nibh, bibendum sit amet porttitor ut, pretium id lectus. Nulla facilisis erat vel nisi malesuada consequat. Phasellus ac porta enim. Aliquam feugiat, lacus ornare fringilla sodales, neque arcu ultricies lorem, vel rhoncus lacus purus eu est. Proin sodales suscipit elit, ut consectetur erat faucibus a. Integer gravida, odio sed pellentesque cursus, lorem mi gravida nisi, vel consequat leo turpis vel leo. Vestibulum ac purus quam. Donec imperdiet varius mollis. Aliquam adipiscing magna vitae ipsum aliquam blandit. Morbi lectus purus, tempor vitae laoreet eu, sollicitudin sit amet magna.</p>
<p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
<p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
<p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula,...
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
header {
height: 4em;
background-color:red;
position:relative;
z-index:1;
}
.content {
background:white;
position:absolute;
top:5em;
bottom:5em;
overflow:auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background:green;
position:relative;
overflow:auto;
}
footer {
height: 2em;
position:relative;
z-index:1;
background-color:yellow;
}