jQuery - 动态 div 高度

Question

jQuery - 动态 div 高度

9

我正在尝试在页面加载和窗口调整大小时调整div的大小。下面的代码放置在</body>之前，它在页面加载时运行良好，但在窗口调整大小时无效。我使用警报测试了调整大小函数，在调整大小时触发，但高度保持不变。

<script type='text/javascript'>
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
</script>

更新： 经过长时间的休息，我发现了问题的原因。我正在使用一个jquery脚本，在被调整大小的同一div上添加一个样式化的滚动条。当我注释掉它时，一切都可以正常调整大小。我已经将滚动条初始化移到与调整大小相同的函数中，并尝试了任何我能想到的变化...仍然无法使其工作。

(#main-content div也有.scroll-pane类)

<script type='text/javascript'>
$(function(){
    $('#main-content').css({'height':(($(window).height())-361)+'px'});
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
    });
});
</script>

- lemon

3个回答

5

请注意，窗口调整大小函数只在窗口调整大小后触发一次。它不会在调整操作期间更新，因此如果您正在拖动窗口边框进行测试，则在松开鼠标按钮之前不会发生任何更改。

此外，请确保您在$(document).ready()中执行此操作，就像这样：

<script type='text/javascript'>
$(function()
{
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
});
</script>

这是一个工作演示。

- Vegard Larsen

谢谢您澄清了问题，但我仍然没有解决这个问题。当我使用您的代码时，大小调整在加载或调整大小时不起作用。我不知道为什么，因为您的示例完美地运行！如果您有任何想法可能会干扰，请回复。 - lemon

@lemon，你在IE上测试过这个吗？我用CSS高度方法调整div的大小时在IE中遇到了问题 - 我认为解决方法是定义div的默认高度。 - Steven Mercatante

窗口调整大小事件的触发间隔取决于浏览器。对于IE（至少是我经历过的旧版本），它会在每个可能的调整大小操作（甚至更多）时触发，对于Firefox，它会根据可用资源来限制事件，而对于Safari，它会以大约100-200毫秒的固定间隔一致地触发它们，具体取决于操作（它类似于Firefox的模型，但触发频率要低得多）。 - eyelidlessness

非常感谢。这帮助我摆脱了需要滚动条时出现的水平跳动。通过这段代码和一些CSS，我能够在不强制使用滚动条的情况下消除水平跳动。 - Cletus

1

只有当文档高度小于或等于窗口高度时，才执行函数。

$(function() {
  if($(document).height() <= $(window).height()) {
    $('#wrapper').css({ 'height': ($(window).height()) });
    $(window).resize(function(){
      $('#wrapper').css({ 'height': ($(window).height()) });
    });
  }
});

我遇到了一个问题，就是内容会溢出 div 的范围。

- tnypxl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lemon · Accepted Answer

问题已解决！

只需要在计算高度之前删除jScrollPane，并重新应用它即可。

<script type='text/javascript'>
$(function(){
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'});
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('.scroll-pane').jScrollPaneRemove();
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
          $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});
    });
});
</script>