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

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

回答2:

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

<script type="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!

来源：https://stackoverflow.com/questions/10967143/how-to-scale-divs-when-i-minimize-browser-so-that-divs-dont-collapse-over-each-o

标签

html

scale