Question

我有一个小问题。怎么可能设置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再次相互交叉..

谢谢

Answer 1

我认为你需要绑定到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';
  });
});

Answer 2

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

<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期间以及调整大小期间动态设置侧边栏的高度。特别感谢巴特的帮助！

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

2 个答案: