JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div class="header"></div>
<div class="body">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
</div>

CSS

html body{
    margin:0px;
    padding:0px;
    overflow:hidden;
}
.header {
    z-index:5;
    position:absolute;
    top:0px;
    background:rgba(92, 167, 184, 0.5);
    background:green;
    height:200px;
    width:-webkit-calc( 100% - 21px);
    border:1px solid red;
}

.body{
    padding-top:200px;
    top:0px;
    position:absolute;
    border:1px solid green;
    height:-webkit-calc( 100% - 200px);
    width:100%;
    overflow-y:scroll;
}

.box{
    display:block;
    height:300px;
    width:300px;
    margin:10px;
    border:3px solid yellow;

}

JavaScript

/**

This is an experiment of a fixed header without position:fixed

it rely on css3 calc which is not implemented in all browsers.
it assume a consistent scroll bar width

**/