JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<div class="layout">
<div class="layout__up layout__up_20">up</div>
<div class="layout__left"></div>
<div class="layout__right"></div>
<div class="layout__center">
Bootstrap
Microsoft Fluent
Google Material
Apple Human Interface
Photon Design System
MongoDB UI Design System
JetBrains Web UI
IBM Design System
Polaris by Shopify
Primer The design system that powers GitHub
Trello Nachos
Design System Grommet

</div>
<div class="layout__down layout__down_20" >down</div>
</div>

CSS

body,html {  
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding:0;
  width: 100%;
}
div {
  box-sizing: border-box;
}
.layout {
  background: #f0f0f0;
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.layout__center {
  background: #ffe5e5;
  height: 100%;
  overflow: auto;
  width: 100%;
  padding-top: 10%;
}
.layout__up_20 ~ .layout__center {
 // padding-top: 20%;
}
.layout__down_20 ~ .layout__center {
  padding-bottom: 20%;
}

.layout__up {
  background: #e5ffe5;
  height: 0%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}
.layout__up_20 {
  height: 20%;
}



.layout__down {
  background: #e5e5ff;
  bottom: 0;
  height: 0%;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
.layout__down_20 {
  height: 20%;
}