jQuery - 动态div高度 [英] jQuery - dynamic div height

问题描述

我试图在pageload和窗口调整大小时调整div的大小。代码下面放置在< / body> 之前，它在pageload上正常工作，但在窗口调整大小没有作用。我用一个警报测试了调整大小函数，它在调整大小时触发，但高度保持不变。

I'm trying to resize a div on pageload and window resize. The code bellow is placed before </body>, and it works fine on pageload, but does nothing on window resize. I tested the resize function with an alert, which triggers on resize, but the height remains unchanged.

<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相同的函数，并尝试任何变化，我可以想到..仍然不能让它工作。

---

update: after a long break, I've discovered what is causing the problem. I'm using a jquery script to add a styled scrollbar on the same div that is being resized. When I comment it out, everything resizes fine. I've moved the scrollbar initialization in the same function as resize, and tried any variations I can think of.. still can't get it to work.

＃main-content div也有.scroll-pane类）

(the #main-content div also has .scroll-pane class)

<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，并重新应用它。

all it needed was removing jScrollPane before calculating the height, and re-applying it.

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

这篇关于jQuery - 动态div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！