在位于底部固定位置的div顶部添加一个可调整大小的手柄

Question

如何使固定位置底部的div从顶部的手柄扩展？

如果您查看StackOverflow问题表单，它底部有一个可扩展的句柄，如何将这样的句柄放在div的顶部？

jquery-ui的resizable似乎不支持这个：http://jsfiddle.net/Ka7P2/725/。

无jquery解决方案没问题。

Answer 1

HTML：

<div id="container" class="resizable">
    <div id="handle" class="ui-resizable-handle ui-resizable-n"></div>
</div>

jQuery的：

$(document).ready(function () {
    $(".resizable").resizable({
        handles: {
            'n': '#handle'
        }
    });
});

的CSS：

body {
    height: 1000px;
}
#container {
    width: 100%;
    background: lightgray;
    height: 100px;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
}
#handle {
    width: 100%;
    height: 5px;
    top: -6px;
    background-color: #000;
}

http://jsfiddle.net/Ka7P2/732/