javascript - 带有大边框的 jquery ui 可调整大小的 div

Question

http://jsfiddle.net/nkesh7e0/1/

enter code here

所以我在玩 jquery ui resizable 并想出了 fiddle 链接中的示例。

我遇到的问题是 anchor 的位置。当我的 div 上有任何大小的边框时，我希望 anchor 位于最外 Angular 。目前 anchor 仅位于元素的 Angular 落。有没有办法根据我的边框大小更新 anchor 的位置？这可能吗？

此外，我希望 anchor 像它们当前那样工作，因为无论它们位于何处，它们都应该只调整 div 元素本身的大小。

Answer 1

解决您的问题的一个简单方法是将内容放在#elementResizable DIV 的子元素中:http://jsfiddle.net/1ajv6u54/

<div id='elementResizable'>
    <div class="content">
        <h1>Full Name</h1>
        Title
    </div>
    ...
</div>

如您所见，内容元素的高度不会调整。您可以通过将内容元素的高度设置为 100% 来解决这个问题。现在内容元素将调整到其父级的高度和宽度。

内容的实际高度为“100% + 2 * border-width”(100% + 100px)。由于您需要 100% 作为全高，您可以将内容元素的“box-sizing”属性设置为“border-box”。 "border-box"将"padding"和"border"添加到元素宽度/高度/最小宽度/最小高度计算中。

您可以在此 fiddle 中找到完整的解决方案.