将可调整大小的子项保留在父项中

Question

我想将可调整大小的元素保留在父元素中。

我做了什么：
我已经给出了 minHeight : 属性并调整大小我正在使用 Math.max 限制新高度以将其保持在 30px 高度

预期：
所有可调整大小的子元素都应始终可见且高度至少为 30 像素。

问题：
不知何故，如果你调整下部元素的大小，在垂直的某个点出现大滚动条并且可调整大小超出 containment:"parent"（为什么？）。
回顾一下 - 页面的垂直滚动条应该 永远不会出现 一个应该总是能够到达 "c" 元素。

$(".resiz").not(":last").resizable({
  handles: 's',
  minHeight : 30,
  containment: "parent",        /* seems not to work?! */
  start:function(e,ui) {
    this.other= $(this).next() || $(this).prev();
    this.startingHeight = this.other.height();
  },
  resize:function(e,ui) {
    var diffH = ui.size.height - ui.originalSize.height;
    this.other.height( Math.max(30, this.startingHeight - diffH) );
  }
});

*{box-sizing:border-box; margin:0;}
html, body{height:100%;}
#panel{
  position:absolute;
  height:100%;
  width:200px;
}
.resiz{
  height:33vh;
  width:100%;
  background:#eee;
}
.ui-resizable-s{
  height:3px;
  background:#08f;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="panel">
  <div class='resiz'>a</div>
  <div class='resiz'>b</div>
  <div class='resiz'>c</div>
</div>

编辑： Seems related 但答案不是我所期望的...

Answer 1

您正在更改最后一个 div 的 height，但从未更改实际 div 的大小。因此 containment 随着最后一个 div 被推送而增长，并且由于 containment 应用于正在调整大小的 div，因此它从未被应用。

因此，为了解决您的问题，我认为您需要 resize 最后一个 div 直到它达到最大值 height，并且在这种情况下阻止再调整大小。你可以这样做，虽然看起来可能有更有效的方法。它仍然会给你一些想法：

$(".resiz").not(":last").resizable({
  handles: 's',
  minHeight: 30,
  containment: "parent",
  /* seems not to work?! */
  start: function(e, ui) {
    this.maxHeight = undefined;
    this.other = $(this).next();
    this.startingHeight = this.other.height();
  },
  resize: function(e, ui) {
    var diffH = ui.size.height - ui.originalSize.height;
    
    //when next div is at max height, you prevent resizing of current div
    if (Math.max(30, this.startingHeight - diffH) == 30) {
      this.maxHeight = this.maxHeight || (this.prevHeight);
      ui.size.height = this.maxHeight;
    //until it's at max div you resize next div  
    } else {
      this.other.height(this.startingHeight - diffH);
      this.prevHeight = ui.size.height;
    }
  }

});

* {
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  height: 100%;
}
#panel {
  position: absolute;
  height: 100%;
  width: 200px;
}
.resiz {
  height: 33vh;
  width: 100%;
  background: #eee;
}
.ui-resizable-s {
  height: 3px;
  background: #08f;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="panel">
  <div class='resiz'>a</div>
  <div class='resiz'>b</div>
  <div class='resiz'>c</div>
</div>

将可调整大小的子项保留在父项中

Keep resizable children within parent

javascript

jquery

jquery-ui

jquery-ui-resizable