Question

我在父级中有2个div，其中一个具有.resizable，但是我希望它具有百分比的最大高度，我找到了设法调整DOM大小的代码，但我无法将其转换为为我工作，我已经非常接近。

我希望可调整大小的div的最大高度为70％，最小高度为30％（最初起点）

我有以下代码设置

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
<div class="wrapper">
<div class="div">
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
</div>
<div class="resizable" id="resizable">

CSS

  .wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
}



.div {
  position: relative;
  width: 100%;
  height: 70%;
  overflow: scroll;
  background-color: #0098ff;
}

.resizable {
  position: relative;
  border-top: 5px solid green;
  width: 100%;
  height: 30%;
  background-color: red;
}

JS

$("#resizable").resizable({
    autoHide: true,
    handles: "n",
    stop: function(e, ui) {
        var parent = ui.element.parent();
        ui.element.css({
            height: ui.element.height()/parent.height()*100+"%"
        });
    }
});

Answer 1

您希望可调整大小的元素为其父级高度的最小30%和最大70%

$("#resizable").resizable({
    autoHide: true,
    handles: "n",
    stop: function(e, ui) {
        var parent = ui.element.parent();
        var height = ui.element.height();

        // Get the min value of height or 70% of parent height
        height = Math.min(height, parent.height() * 0.7);

        // Get the max value of height or 30% of parent height
        height = Math.max(height, parent.height() * 0.3);

        ui.element.css({
            height: height + 'px'
        });
    }
});

更新：您应该使用resize事件而不是stop，以防止用户过度调整大小

http://api.jqueryui.com/resizable/#event-resize

resize（event，ui）类型：调整大小

在调整大小时，在调整大小的拖动时会触发此事件   处理程序。

Answer 2

建立在@MuhammadAref的约束高度的答案之上 -

在玩了一些游戏后，你不会轻易地将其付诸实践而不将所有蓝色内容放入自己的容器中。基本上，jQuery UI依赖于相对定位，我们必须将它用于可调整大小的元素（或者它在某些测试中不能调整大小）。

我已经the desired effect working on this forked fiddle了，这就是：

CSS

#wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
}
.n-resizable-topcontent {
  height: 70%;
  background-color: #0098ff;
}
.resizable {
  width: 100%;
  height: 30%;
  background-color: red;
}

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
  <div id="wrapper">
    <div class="n-resizable-topcontent">
      <div> some text here </div>
      <div> some text here </div>
      <div> some text here </div>
    </div>
    <div class="resizable">resizable</div>
  </div>
</body>

的Javascript

$(".resizable").resizable({
    autoHide: true,
    handles: "n",
    resize: function( event, ui ) {
            // parent
        var parent = ui.element.parent();
        var parent_height = parent.height();

        // Get the min value of height or 70% of parent height
        // Get the max value of height or 30% of parent height
        var height = Math.min(ui.size.height, parent_height * 0.7);
        height = Math.max(height, parent_height * 0.3);

        // Set height for resizable element, and do not change top position.
        // Instead the previous element - content container - will be adjusted.
        ui.size.height = height;
        ui.position.top = 0;

        // make the content container's height 100% of parent, less .resizable
        ui.element.prev('.n-resizable-topcontent').height( parent_height - height );
    }
});

如何？

我将#wrapper划分为两个元素，一个是您的（可调整大小），另一个是保存所有内容的元素 - 内容容器。我给它上了一个课n-resizable-topcontent所以它很突出。

初始代码的主要变化是更改新容器元素的高度，而不是使用已调整大小的元素的top位置。在n方向调整大小时，jQuery UI将调整top 和 height - 而不是向上移动元素，我们将元素缩小到它上面（容器）以及其中的任何内容。

如果您担心元素太少或嵌套元素太多 - 它通常不是问题，最好确定它是如何工作的。使用CSS进行定位并不总是那么简单或直接，而且更难以做的事情之一是自动高度 - 很难分辨出吃掉的元素，其余的＆＃34;没有将每个元素配置为特定高度的垂直空间。

我能提供的最佳建议是：保持简单。如果你需要一个特定的元素来做太多的事情，它很快就会变得不可能，然后使用看起来像多余的HTML，css，js等来定位所有应有的东西并不会感到羞耻。

如果您有关于此容器应该包含的内容的更多信息/您可能有的任何其他限制，我可以更新我的答案以适应。

可调整大小的div不响应百分比高度

2 个答案:

CSS

HTML

的Javascript

如何？