JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pagewidth">
    <header>
    </header>
    <section class="wrapper">
    </section>
    <footer>
    </footer>
</div>

CSS

html,body{
    height: 100%;
    background: black;
    margin:0;
    padding:0;
}
*{
   box-sizing: border-box;
}
.pagewidth{   
    position: relative;
    height: 100%;
    min-height:100%;
}
header{
    background: green;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 30px;
    z-index:2;
}
.wrapper{
    background: black;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
    width:100%;
    height:100%;
    padding: 30px 0;
}
footer{
    background: blue;
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    height: 30px;
    z-index:2;
}