JSFiddle - React, Tailwind, and code Playground

by rebeen

HTML

<div id="page">
  <div id="top">top div</div>
  <div id="middle">middle div</div>
  <div id="bottom">bottom div</div>
</div>

CSS

#page {
 height: 300px;
}
#top, #bottom {
  background: #000;
  min-height: 17.5%;
  width: 100%;
}
#middle {
 background:#555;
  height: auto;
  width: 100%;
}

JavaScript

$(function(){
    var pageHeight = $('#page').height();
    var topHeight = $('#top').height();
    var bottomHeight = $('#bottom').height();
    var middleHeight = $('#middle').height();
    if(middleHeight > (pageHeight-(topHeight+bottomHeight)))
        $('#middle').css(height, 'auto');
    else
        $('#top, #bottom').height((pageHeight-middleHeight)/2);
})