JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head></head>
<body>
<div class="container">
<div class="innercontainer">
<div class="sidebar">sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer-container"></div>
</div>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
}
.container {
background: #dedede;
}
.innercontainer {
border: 1px solid red;
overflow: visible;
}
.sidebar {
width: 200px;
float: left;
min-height: 100%;
height: auto;
border: 1px solid green;
}
.content {
float: right;
width: 100px;
min-height: 100%;
height: auto;
border: 1px solid black;
}
.footer-container {
height: 20%;
clear: both;
background: #efefef;
}
JavaScript
var windowHeight = $(window).innerHeight();
$('.innercontainer ').css({'height' : windowHeight });