JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div id="wrapper">
  <div id="navigation">
    nav!!!
  </div>
  
  
  <div id="bottomHalf">
      extend!!!<br>
      extend!!!<br>
      extend!!!<br>
      extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>extend!!!<br>
  </div>
</div>

CSS

html, body, #wrapper {
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 990px;
    position: relative;
}
#navigation {
    height: 55px;
    background-color: #fff;
}
#bottomHalf {
    position: absolute;
    top: 55px;
    bottom: 0;
    width: 100%;
    background-color: #4d3c37;
    border: 5px solid #f0f;
}