Question

我在一个容器中有2个可调整大小的div。一个可调整大小的div包含在第二个中。

<div id="container">
  <div id="div1" class="droppable resizable1">
    <div id="div2" class="droppable resizable2"></div>
  </div>
</div>

实际上，这些div存在两个问题，我认为它们是相关的。

首先，如果我调整div1，div2的大小，然后再次调整div1到底部，则div2正在移出容器。

第二个问题以相同的方式发生。 div2正在进行与第一个问题相同的测试，这就是为什么我认为它们是链接的。

我尝试更改CSS，但是没有找到解决方案。开始时，我以为它来自JQueryUI的minHeight，所以我检查了文档，但可调整大小的函数看起来正确。

我做了一个https://jsfiddle.net/Spydaxx/4ez2xtan/85/，所以您可以看到我要做什么。

我希望两个div锁定在底部并向上调整大小。实际上，在调整大小时我会遇到一些麻烦，但是调整大小本身看起来不错。

感谢您的帮助和时间。

Answer 1

因此，如果我理解正确，则希望能够在您设置的高度限制内自由移动任一div。除非您需要嵌套的div，否则我不确定这是否可以与您要尝试的工作一起使用，

<div id="container">
  <div id="div1" class="droppable resizable1"></div>
  <div id="div2" class="droppable resizable2"></div>
</div>

$(".resizable1").resizable({
    handles: 'n',
    containment:'#container',
  minHeight: 100
});
$(".resizable2").resizable({
    handles: 'n',
  containment: '#container',
  minHeight: 50
})

我没有更改任何CSS，所以这里没有包含代码。只是不要嵌套div并更改div2的容器

如何将可调整大小的div锁定到页面底部？

1 个答案: