JSFiddle - React, Tailwind, and code Playground

by Sergey Pavlyukov

HTML

<div id="wrapper">
    <header>Header</header>
    <div id="content">
        
    </div>
    <div id="additional-block">Additional Block</div>
    <footer>Footer</footer>
</div>

CSS

html, body {
    height: 100%;
    margin:0;
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:100%;
    margin:0 auto -160px;
    min-height:100%;
}
#content:before {
    content:"";
    height:150px;
    display:block;
}
#content:after {
    content:"";
    height:160px;
    display:block;
}
#additional-block {
  clear:both;
  height:100px;
  width:100%;
  background: aqua;
}
footer {
    width:100%;
    height:60px;
    background:blue;
}