0

我有一个小问题。如果我最小化窗口，如何设置 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 会再次相互重叠..

谢谢

4

2 回答 2

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';
  });
});
于 2012-06-10T08:06:36.227 回答
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 期间和调整大小期间动态设置侧边栏的高度。特别感谢 Bart 的帮助！

于 2012-06-10T19:53:06.533 回答