javascript - 垂直调整大小的面板固定在屏幕底部

Question

当我向固定在页面底部的 div 添加可调整大小时，div 在调整大小时跳转到页面顶部 - 我希望它保持固定在底部但向上调整大小。

我确定它很简单，但现在对我来说还不够简单!

这是一个显示我的问题的 fiddle

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

感谢收到的任何指示。

Answer 1

我成功了。我通过从顶部添加 div 所需的距离来解决它。我还为此制作了一个 jQ 脚本，因此即使调整窗口大小，顶部的距离也是正确的。希望这是您想要的解决方案! =)

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

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

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