JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<div id="top">Toolbar</div>
<div id="main">qwerqwer qwer qwer qwer qwer qwer qwer qweqweqwer qwerq werq qwer qwer qwer qwer qwer qwerqwer qwerqwerqwe qwlkejr lkejrlkwej rlwkejr lwkej lkfj lskdjf asldkfj alskdfj alskdjf laskdjf lkejr flerkf wejr fkjrhfqkejhf kdjf hskdjf haksdj fhkjwe hfkwjhf qkwje hfkj hfksdjf haksdjf hkjreh frhihrhk qwkje rkj erkj rkwej skdjfha skjhf sakjhfd askjhd fskajdh fksjhd fksjdh fksajhd kjhf ksjd hfksajdhfaskdh fksjh dkjd fksj hfskjh wkejrh ekjr htekjrt hkejr htekj rthwkejr thkwejr htkej rhkej htkejrh tkejrh tekrjth kejr hth kfje kj ekjc ek jchekjd ckej chkejd hcekjd chedc</div>
<div id="bottom">Statusbar</div>

CSS

#top {
    height:40px;
    background-color:#AAA;
}
#main {
    overflow:scroll;
}
#bottom {
    height:40px;
    background-color:#AAA;
}
body{
    overflow:hidden;
    margin: 0;
    padding:0
}

JavaScript

$(window)
.resize(function() {
    $('#main').height(
        $(window).height() - 
        $('#top').outerHeight(true) - 
        $('#bottom').outerHeight(true)
    );
})
.resize();