我如何将可分解的div锁定到页面底部

Question

我在容器中有2个可重大的DIV。第二个可重新分配的DIV包含。

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

实际上，我在这些divs上有两个问题，我认为它们是链接的。

首先，如果我将div1，div2和div1再次大小调整到底部，则div2将从容器中移出。

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

我试图更改我的CSS，但没有找到解决方案。一开始，我认为它来自jqueryui的Minheight，所以我检查了文档，但是我的可解析功能看起来正确。

我做了一个https://jsfiddle.net/spydaxx/4ez2xtan/85/，因此您可以看到我要做的事情。

我希望这两个divs锁定在底部并可以向上解析。实际上，调整大小时我有一些麻烦，但调整大小本身看起来都很好。

感谢您的帮助和时间。

Answer 1

因此，如果我理解正确，您希望能够在设置的高度限制内自由移动div。除非您需要嵌套的Divs，否则我不确定这是否适合您要做的事情，这将起作用

<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