css - jQuery - dynamic div height

Question

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>

---

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.

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

Answer 1

solved it!

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>