css - set height of div(s) at fullscreen with a scrollbar in the div and a header -

i trying put quick viewer data. need 3 cells... header, , 2 columns (i'm using bootstrap). i'd 2 columns scroll independently of each other. i'll populating left column vertical data , when item selected, i'll use populate right column more vertical data...

i won't know height of header either. i'm working right now:

html, body {     height: 100%; }  .full-height {height: 100%;} 

and

<div class='container-fluid full-height'>     <div class='row'>         <div class='col-md-12' id='headercontent'>         </div>     </div>     <div class='row full-height'>         <div class='col-md-6 full-height' id='events'></div>         <div class='col-md-6 full-height' id='archive'></div>     </div> </div> 

this closest i've been able far. when this, columns 100% of height of container (not taking header in account) , hang longer screen.

**i'm trying work flexbox right now, it's causing other funkiness don't like... adding flexbox made header div smaller point it's data overflowing (i don't want that)

if not want use flexbox, can use simple jquery correct heights

html:

<div class='container-fluid'>     <div class='row'>         <div class='col-md-12' id='headercontent'>         </div>     </div>     <div class='row full-height'>         <div class='col-md-6 full-height' id='events'></div>         <div class='col-md-6 full-height' id='archive'></div>     </div> </div> 

css:

html, body {     height: 100%; }  #headercontent {      background-color: red;     height: 45px; }  .full-height {height: 100%; background-color: #ddd; }  .col-md-6 {     width: 50%;     float: left; }  #archive {     background-color: #666; } 

js:

$(function() {         var full_height = $('body').height() - $('#headercontent').height();         $('.full-height').height(full_height);     }); 

fiddle: https://jsfiddle.net/azuh6fb2/