jquery ui resizable div mit Blättern, der Griff bewegt sich beim Scrollen

Question

Ich habe ein Problem, den südlichen Griff, um beim Scrollen ein resizable div, nach unten stecken, bin mit jQuery ui resizable-Funktion, um eine benutzerdefinierte div als a handhaben, die resize-Funktionalität funktioniert, aber wenn ich die Scrollbar der Griff bewegt sich mit dem Inhalt zu verwenden, möchte ich es am unteren Rand des div bleiben:

hier ist die 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> 

die jquery Aufruf an die Größe:

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

und die CSS:

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

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

ist die jsfiddle:

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

Answer 1

Sie sollten Ihre long text in einem div wickeln und geben overflow zu diesem 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; 
}