jQuery - dynamic div height

css, height, html, jquery, resize

Solution

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>

Problem

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

Original source