当我最小化浏览器时,如何缩放div,以便div不会相互折叠

时间:2012-06-10 07:54:43

标签: html scale

我有一个小问题。 怎么可能设置2个div的高度,以便它们不会崩溃,而是在我最小化窗口的情况下动态扩展?我在js中做到了这一点:

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

});

这是有效的,但是当我最小化时,我是否必须在函数中执行此操作并在window.load期间调用它?现在的问题是,当我最小化浏览器时,div再次相互交叉..

谢谢

2 个答案:

答案 0 :(得分:2)

我认为你需要绑定到resize事件

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

答案 1 :(得分:0)

以下是那些曾经搜索过这种设置的人的解决方案......

<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>

此代码在document.ready期间以及调整大小期间动态设置侧边栏的高度。特别感谢巴特的帮助!