jQuery – 动态div高度

我正在尝试在pageload和窗口大小上调整div的大小.下面的代码放在< / body>之前,它在页面加载上工作正常,但在窗口调整大小上什么都不做.我用一个警告测试了resize函数,它在调整大小时触发,但高度保持不变.

<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上添加一个样式滚动条.当我发表评论时,一切都调整好了.我已经将滚动条初始化与resize相同的功能,并尝试任何变化,我可以想到..仍然无法让它工作.

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

解决方法

解决了！

所有它需要的是在计算高度之前删除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>