JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<body onresize="myFunction()" onload="//myFunction()" style="margin:54px auto;min-height:500px;height:500px;">
  <div style="margin-top:0;display:block;position:fixed;width:inherit;top:0;display:flex;flex-direction:column;flex:100;z-index:10;display:flex;align-items:strech;">
    <section id="debug" style="flex:100;flex-direction:column;height:50px;z-index:4">HEADER</section>
  </div>
  <div id="content" style="display:flex;flex-direction:row;justify-content:center;align-content:center;min-height:500px;height:500px;">
    <div style="display:flex;flex-direction:column;flex:35;position:relative;">
      <section style="flex:10;position:absolute;top:0;width:95%;height:70px">flex="101 left"</section>
      <section style="flex:90;overflow-y:scroll;padding-top:80px">flex="90"</section>
    </div>
    <div style="display:flex;flex-direction:column;flex:65;position:relative;">
      <section style="flex:100;overflow-y:scroll;">flex="1001"</section>
      <section style="flex:100;position:absolute;bottom:0;width:97%;height:60px;">flex="1001"</section>

    </div>
  </div>
  <div style="display:flex;flex-direction:column;flex:100;">
    <section style="flex:100;flex-direction:column;height:50px;">FOOTER</section>
  </div>
</body>

CSS

body[ng-cloak] {
  display: none;
}

body {
  background-color: #FEEBC8;
  width: 1280px;
  box-sizing: border-box;
}


/* Important to set height for column layout */

.boxWithHeight {
  box-sizing: border-box;
  height: 10%;
}

.a,
section {
  border: 1px solid rgba(85, 97, 85, 0.27);
  margin: 1px;
}

section {
  background-color: #dedede;
}

JavaScript

function myFunction() {
  //alert((screen.availHeight / 2) + "px")
  document.getElementById("content").style.height = (screen.availHeight / 3) + "px";
  document.getElementById("debug").innerHTML = (screen.availHeight / 3) + "px";
}