Question

我有一个有两个孩子的div，由于jQuery UI库，它可以调整大小。

问题在于，当你调整两个孩子中的一个时，另一个孩子会溢出父亲。

我想要的是不允许溢出。使用＆＃34;不允许＆＃34;我不是说溢出：隐藏。不允许溢出。

这里有一个jsfiddle演示：https://jsfiddle.net/t8c1q1gm/

注意：我想要一个CSS解决方案，而不是一个JavaScript解决方案。

HTML CODE

<div id="parent">
  <div>

  </div>

  <div>

  </div>
</div>

CSS代码

#parent{
  height:891px;
  width:630px;
  margin-bottom:1000px;
}

#parent > div
{
  border-color:red;
  height:20%;
}

JS代码

var children = document.querySelector("#parent").querySelectorAll("div");

for(var k=0; k<children.length; k++)
{
    $(children[k]).resizable({ containment: "parent" });
}

Answer 1

我认为这就是你需要的

var children = document.querySelector("#parent").querySelectorAll("div");

for(var k=0; k<children.length; k++)
{
    $(children[k]).resizable({ containment: "parent" });
    $(children[k]).resize(function() {
      var j = $("#parent").height() - $(this).siblings().height();
      $(this).css('max-height',j);
    });
}

小提琴https://jsfiddle.net/t8c1q1gm/

Answer 2

Roysh的答案很棒，但我只是想补充一点，我注意到有一个小bug，因为resize事件仅在div实际调整大小时调用（例如，如果你向下拖动但div已经在最大高度，然后大小不能更改，并且resize事件不会被调用，这意味着您必须先向上拖动一点才能再次向下拖动。）

所以我使用的是start事件，只要你点击调整div的大小就会调用它。这使得该过程更加一致。

var children = document.querySelector("#parent").querySelectorAll("div");

for(var k=0; k<children.length; k++)
{
    $(children[k]).resizable({
        start: function() {
            var maxHeight = $("#parent").height() - $(this).siblings().height();
            $(this).resizable("option", "maxHeight", maxHeight)
        },
        containment: "parent" });
}

这是小提琴：https://jsfiddle.net/t8c1q1gm/3/

HTML：不允许儿童过父亲

2 个答案: