css – jquery ui可调整大小的div与滚动,滚动时手柄移动

滚动可调整大小的div时,我有一个问题是让南手柄卡在底部,
我使用 jquery ui resizable函数将自定义div设置为句柄,调整大小功能正常工作,但是当我使用滚动条时,句柄随内容移动,我希望它保留在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调用resize：

$(".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/

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

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

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