vertically resizable panel fixed to bottom of screen

Question

When i add resizable to a div fixed to bottom of page the div jumps to the top of the page on resize - I want it to stay fixed at the bottom but resize upwards.

I'm sure its something simple but not simple enough for me right now!

Here is a fiddle showing my problem

<div class="resize">

$('.resize').resizable({handles: 'n'});

.resize{
position:fixed;
bottom:0px;
width:100%;
background-color:#aaaaaa;
height:100px;
}

.ui-resizable-n {
background-color:red;
width:5px;
height:5px;  
}

https://jsfiddle.net/gnz96vhy/

Any pointers gratefully received.

Answer 1

I made it work. I solved it by adding the distace that the div needed from the top. I also made a jQ script for that so the distance the top will be correct even if the window is resized. Hope this was the solution you wanted! =)

function disToTop() {
    var windowHeight = $(window).height(),
        resizeHeight = $("#div2").height(),
        difference = windowHeight - resizeHeight;

    $("#div2").css("top", difference);
}

https://jsfiddle.net/gnz96vhy/4/