How To Scale Divs When I Minimize Browser So That Divs Dont Collapse Over Each Other

i have small question. how is it possible to set the heights of 2 divs so that they dont collapse but rather scale dynamically if i minimize the window? i did this in js: $(docum

Solution 1:

I think you need to bind to the resize event

$(document).ready(function(){
  var sidebar = document.getElementById('sidebar').offsetHeight;
  $(window).resize(function(){
    var footer = document.getElementById('footer').offsetHeight;
    document.getElementById('sidebar').style.height = sidebar - footer + 'px';
  });
});

Solution 2:

Here is the solution also for those who once search for this kind of setup...

<scripttype="text/javascript">
$(document).ready(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';
$(window).resize(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';
     });
});
</script>

this code sets the height of sidebar dynamically, both during document.ready and also during resize. special thanks to Bart for help!