jquery ui resizable div с прокруткой, ручка перемещается при прокрутке

Question

У меня проблема с тем, чтобы южный дескриптор застрял на дно при прокрутке изменяемого размера div, с использованием функции jquery ui resizable для установки пользовательского div как ручка, функциональность изменения размера не работает, но когда я использую ScrollBar ручка перемещается с содержимым, я хочу, чтобы он оставался в нижней части DIV:

вот HTML:

<div class="Container"> 
    <h2>Title</h2> 

    <div class="Content"> 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 
    a long text...a long text...a long text...a long text...a long text... 

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

вызов JQuery, чтобы изменить размер:

$(".Content").resizable({ handles: "s" }); 

и CSS:

.Container 
{ 
    width:250px; 
    padding:3px; 
    background:#f00; 
} 
.Content 
{ 
    position : relative; 
    height:224px; 
    overflow:auto; 
    background:#fff; 
} 

#handle { 
    height : 8px; 
    background : #00aa00; 
    bottom:0; 
} 

Вот jsfiddle:

http://jsfiddle.net/ftkbL/2389/

Answer 1

Вы должны обернуть long text в DIV и дать overflow до этого div

Working Demo

HTML

<div class="Content"> 
<div class="text">blah... ..blah</div> 
<div id="handle" class = "ui-resizable-handle ui-resizable-s"></div> 
</div> 

CSS

.Content 
{ 
background:#fff; 
height:224px;  
} 

.text 
{ 
position : relative; 
height:100%; 
overflow:auto; 
background:#fff; 
}