JSFiddle - React, Tailwind, and code Playground

by sandwichest

HTML

<div id="outer">
 <div id="main">
  <div id="nav">
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>

  </div>
  <div id="header">header</div>
     <div id="content">content will always be the same height as the nav now. more content goes here content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. content will always be the same height as the nav now. </div>
  <div id="footer">footer</div>
 </div>
</div>

CSS

body,html {padding:0;margin:0; background:blue;}

#outer { width:500px; margin:0 auto; position:relative; }

#main { background: #FFF; border: 1px solid black; }

#nav { position:absolute;left:10px;top:0px;width:100px; background:#c0c0c0; }

#nav a {display:block;}

#header { padding-left:120px; height: 100px;background: #252525; font-size:2em; color:#c0c0c0; }

#content { padding-left:120px;  }

#footer { background: #ccc; height:25px; }

JavaScript

$(function() {
    var headerHeight = $('#header').height();
    var navHeight = $('#nav').height();
    var contentHeight = navHeight - headerHeight;
    $('#content').css('minHeight',contentHeight);
})