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

Question

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

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

jquery-ui的可调整大小似乎不支持这个: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/