Jquery UI Resizable() resize with window size

When resizing a div that has the same height as the window. after pulling the handle and resizing the browser window the div does not resizes with the browser height/width.

by Plippie Plop

HTML

<div id="left_bar">
    <div class="bar_content"></div>
</div>

CSS

#left_bar{
    position:absolute;
    top:0px;
    left:0px;
    z-index:10;
    height:100%;
    padding-right:20px;
}


#left_bar .bar_content{
    position:relative;
    height:100%;
    background-color:#EFEFEF;
    width:210px;
    border-right:2px solid #7a7a7a;
    overflow:hidden;
}

JavaScript

$(document).ready(function() {

    var leftPanel = $("#left_bar");
    var windowHeight = $(window).height();


    $(window).resize(function() {
        windowHeight = $(window).height();
        leftPanel.css({
            "height": windowHeight
        });
    });




    $(".bar_content", leftPanel).resizable({
        minWidth: 100,
        maxWidth: 400,
        handles: 'e'
    });


});