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

3 回答 3

14

解决了！

它所需要的只是在计算高度之前删除 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>
于 2009-10-17T10:16:50.283 回答
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>

这是一个工作演示。

于 2009-09-18T09:40:49.537 回答
1

除非文档高度小于或等于窗口高度，否则不要执行函数。

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

我遇到了内容会流出 div 的问题。

于 2011-01-24T04:42:28.687 回答