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

工作演示

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