javascript - make div 100% of browser height depending on length of content -

i have 2 divs, navigation , main content in bootstrap grid system. length of either can vary depending on amount of content. need them both styled fill 100% of browser window if neither has content reach bottom naturally. if @ least 1 of divs has more content length of browser window, need able scroll down page styles of both divs remaining in tact , both have height of longer of 2 divs.

i'm using javascript resize function seems work not in case neither div long enough fill height of browser window. suggestions?

html

<div class="row">     <div id="nav" class="col-xs-2">         variable height navigation     </div>     <div id="main" class="col-xs-10">         variable height content     </div> </div> 

javascript

function resize() {     var h = (document.height !== undefined) ? document.height : document.body.offsetheight;                                                                document.getelementbyid("nav").style.height = h + "px"; }  resize(); window.onresize = function () {     resize(); }; 

i trying understand question, , if i'm correct looking is:

• both divs need equally high
• they need @ least height of screen
• they need take height of highest div

so let's try achieve goal possible:

var main = document.getelementbyid('main');  var nav  = document.getelementbyid('nav');    function resize(){      var highest;      // set divs autosize, can measure content height correctly.      main.style.height = 'auto';      nav.style.height  = 'auto';      // find highest div , store height.      highest = main.clientheight > nav.clientheight          ? main.clientheight          : nav.clientheight;      // check if highest value div or window.      highest = highest > window.innerheight          ? highest          : window.innerheight;      // assign newly found value      main.style.height = highest + 'px';      nav.style.height  = highest + 'px';  }      resize();  // also, don't need wrap in function.  window.resize = resize;  // however, better be:  window.addeventlistener('resize', resize, false);

#main, #nav {    width: 100%;    height: auto;  }  #main { background: red; }  #nav { background: green; }

<div id="main"></div>  <div id="nav"></div>

now, if aren't bothered actual sameness in heiught of both divs want them @ least 1 screenful, should consider using css:

html, body { height: 100%; } #nav, #main { min-height: 100%; } 

i think better solution (no javascript!) , sort-of want, bar fact won't have equally high div elements. however, barely notice each @ least fill page.