javascript - Adjusting height according to dynamically added elements -

i have problem dynamically added div's , adjusting parent's height according dynamically added content.

so, have div called #full-content-wrap , it's width divided 2 child elements. these element's called .doubled-wrap-content-left , .doubled-wrap-content-right (let's call left wrap , right wrap). so, then, have 2 links (or buttons, or whatever) when click on 1 of these links, javascript add element .doubled-table dynamically left or right wrap (according link clicked). so, have bit problem setting height of #full-content-wrap or left/right wrap.

when set full-cont-wrap's height auto, , l-r wrap's height auto too, it's still 0px. when set 100% - auto it's still 100% , added elements overflowing off parent element. i've done way. have created function adjusts height of full-cont-wrap biggest height of it's content (left or right wrap) , when it's empty, window.innerheight. but, it's kinda uncomfortable , has 2 minuses. the first one when change size of browser, reload page , maximize window, height smaller innerheight of maximized window (this happens when open inspect element function). the second one can realise, it's unnecessary js counting , setting of height.

question is: how in css without js?

things like: divs floating etc. know , have tried set display every value.

additional questions comment please :/

<div id="full-content-wrap">  <div id="section-name">     <span>dashboard</span>     <span class="section-subname">statistics , more</span> </div>  <div id="doubled-wrap-content">     <div id="doubled-wrap-content-left">         <div class="doubled-table">             <div class="table-header">                 <div class="caption">                     <span class="fa fa-cogs"></span>                     <span class="caption-content">server control</span>                 </div>                  <div class="tools">                     <div class="picon-collapse"></div>                     <div class="picon-remove"></div>                 </div>             </div>             <div class="table-body"></div>         </div>     </div>      <div id="doubled-wrap-content-right">     </div> </div>   

function setcontentwrap () {  /* set width full-wrap-content */  var width = screen.width; width -= 220;  var percent = ((width * 100) / screen.width);  $("#full-content-wrap").css({ width: percent + '%' });   /* set height full-wrap-content */  var left = $('#doubled-wrap-content-left')[0].offsetheight;  var right = $('#doubled-wrap-content-right')[0].offsetheight;  var sidepanel = $('.side-panel-menu')[0].offsetheight;  var side = false; var bigger = 0, b = ""; if (left > right) { bigger = left; b = "left"; } else if (right > left) { bigger = right; b = "right"; } else if (right == left) { bigger = right || left; }  if (bigger < sidepanel) {     bigger = sidepanel;     side = true; }  var height = 0, j = 0; $('#full-content-wrap').each(function () {     var n = this.children;     var length = this.children.length;     ( var = 0; < length; i++ ) {         if (n[i].id == 'doubled-wrap-content') break;          height += n[i].style.height || n[i].offsetheight;         j++;     } });  var more = 0; $('#doubled-wrap-content').each(function () {     if ( more < this.children.length ) {         more = this.children.length;     } });  if (side == false) {     height += bigger + (more * 60); } else {     height = window.innerheight; } $('#full-content-wrap').css({ minheight: height + 'px' });   var setto = window.innerheight; if (parseint($('#full-content-wrap').css('minheight'), 10) <     window.innerheight) {     $('#full-content-wrap').css({ height: setto + 'px' });     //$('#full-content-wrap').css({ height: '100%' }); }  } 

hope it's all. because spaces here ....ooh