JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">GENERAL HEADER</div>
<div id="main_body">
    <div id="sidebar">SIDE</div>
    <div id="body">
        the content
        <div class="footer">general footer</div>
    </div>
</div>

CSS

*           {margin:0; padding:0;}
html        {overflow: hidden;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:100;}
body        {background:#fff; position:absolute; width:100%; height:100%;overflow: auto;}
#main_body  {
    background:#fff;
    height:100%;
    padding:50px 0 0;
    box-sizing:border-box;
    width:100%;
    min-width:900px;
}
#header     {
  background:#119911;
  position:absolute;
  width:100%;
  min-width:960px;
  height:50px;
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  justify-content:flex-start;
  align-items:center;
}
#sidebar    {background:#f2f2f2; float:left; width:60px; height:100%; overflow:hidden;}
#body       {
    background:#c2c2c2;
    height:100%;
    overflow:scroll;
    word-wrap: break-word;
}
.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
}