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

Question

滚动可调整大小的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/

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;
}