滚动可调整大小的div时,我有一个问题是让南手柄卡在底部,
我使用 jquery ui resizable函数将自定义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：
解决方法
你应该将你的长文本包装在一个div中,然后溢出到该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;
}
