JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>
</div>
<div id="footer">Footer</div>

CSS

#header {
    position: fixed;
    width:100%;
    height:100px;
    top:0px;
    z-index:2;
}
#content, #footer {
    position: relative; /* or static */
    z-index:1;
}
html,body,div {
    margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
    margin-top: 100px; /* the same value as header height */
}


/*For demo only*/
#header, #footer {
    background: #ccf;
}
#content {
    background: #cfc;
    height:2000px;
}
#footer {
    height: 100px;
}

#header, #footer, #content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:3px dotted green;
}