Question

我正在尝试为我的元素添加一个调整大小的手柄。由于用户可以调整元素大小，因此他们必须能够滚动。我遇到的问题是我们的要求声明调整大小的手柄会浮动在滚动条旁边，即使滚动也是如此。

我做了一个接近我需要的jsfiddle：JSFiddle

<html>
<head>
<style>
#common-module-inner
{
    height: 200px;
}

#common-module
{
    width: 500px;
    position: absolute;
    overflow: auto;
}

#gs-resize-handle
{
    position: absolute;
    width: 11px;
    height: 11px;
    bottom: 0;
    right: 0;
    background-color: #f00;
}
</style>
</head>
<body>
<div id="common-module">
    <div id="common-module-inner">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    <div id="gs-resize-handle">
        </div>
</div>
</body>
</html>

红色矩形表示调整大小的手柄。问题是当用户滚动内容时，红色矩形保持静止而不是停留在元素的底部。

我能找到的最接近的东西是将一个元素对接到页面的底部，但是大多数这些似乎依赖于窗口，这不是我想要的。

我不反对基于jquery的解决方案，但是用html / css可以实现这个吗？

谢谢。

Answer 1

你为什么这么难？

只需使用CSS3，然后使用：

resize:both;

到您的元素。

JSFiddle

这样你就不需要使用jquery或javascript，

删除红色块并使用手柄。

Answer 2

你需要的是将调整大小句柄定位为fixed内的#common-module（也是固定的），但由于这是不可能的，我认为你需要一个类似jQuery的解决方案。由于调整大小的可能性基于javascript（我想），无论如何你都会使用Javascript。

Answer 3

进行两项更改：

从overflow:auto;移除#common-module并将其添加到#common-module-inner

#common-module-inner {
    height: 200px;  
    overflow: auto;  
}
#common-module {
    width: 500px;
    position: absolute;    
}

以下是演示：在Chrome & Firefox

中测试过

DEMO

将块锁定到滚动元素的底部

3 个答案: