Search code examples
htmlscale

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: 

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

});

this is working but not when i minimize, do i have to do it in a function and call it during window.load or so? the problem now is that when i minimize the browser, the divs are going over each other again..

thanks

Solution

  • 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';
  });
});