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

时间:2015-08-18 14:56:04

标签: javascript jquery html css

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

我现在确定它简单但不够简单!

这是一个显示我的问题的小提琴

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

感激地收到任何指示。

1 个答案:

答案 0 :(得分:0)

我做到了。我通过添加div从顶部需要的distace来解决它。我也为它做了一个jQ脚本,所以即使调整窗口大小,顶部的距离也是正确的。希望这是你想要的解决方案! =)

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

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

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