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

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

javascript jquery html css

Javascript 可调整大小的div不响应高度百分比,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在一个父级中有两个div，其中一个可以调整大小，但是我希望它有一个最大高度（以百分比表示），我已经找到了能够调整DOM大小的代码，但是我无法让它为我工作，我已经非常接近了我希望可调整大小的div的最大高度为70%，最小高度为30%（最初为起点）我有下面的代码设置 HTML <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <link rel="s

我在一个父级中有两个div，其中一个可以调整大小，但是我希望它有一个最大高度（以百分比表示），我已经找到了能够调整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">

  .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;
}

$("#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+"%"
        });
    }
});

您希望可调整大小的元素为其父元素高度的最小值

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

，以防止用户过度调整大小

调整大小（事件、ui）类型：调整大小

在调整大小过程中，拖动调整大小按钮时触发此事件处理程序

您希望可调整大小的元素为其父元素高度的最小值

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

，以防止用户过度调整大小

调整大小（事件、ui）类型：调整大小

在调整大小过程中，拖动调整大小按钮时触发此事件处理程序

基于@MuhammadAref限制高度的答案-

在玩了一些游戏之后，如果不将所有蓝色内容放入它自己的容器中，您将很难让它工作。基本上，jQueryUI依赖于相对定位，我们必须将其用于可调整大小的元素（或者在某些测试中无法调整大小）

我得到了，这就是为什么：

CSS

#包装器{
位置：固定；
宽度：100%；
高度：100vh；
}
.n-可调整大小的-topcontent{
身高：70%；
背景色：#0098ff；
}
.可调整大小{
宽度：100%；
身高：30%；
背景色：红色；
}

HTML


这里有一些文字
这里有一些文字
这里有一些文字
可调整大小

Javascript

$（“.resizable”）.resizable({
自动隐藏：对，
句柄：“n”，
调整大小：函数（事件、ui）{
//母公司
var parent=ui.element.parent（）；
var parent_height=parent.height（）；
//获取高度的最小值或父高度的70%
//获取高度的最大值或父高度的30%
变量高度=数学最小值（ui.size.height，父项高度*0.7）；
高度=数学最大值（高度，父项高度*0.3）；
//为可调整大小的元素设置高度，并且不更改顶部位置。
//相反，将调整上一个元素内容容器。
ui.size.height=高度；
ui.position.top=0；
//使内容容器的高度小于父容器的100%。可调整大小
ui.element.prev（'.n-可调整大小的-topcontent'）.height（父元素高度-高度）；
}
});

怎么用？我已经将

#wrapper

分为两个元素，一个是您拥有的（可调整大小），另一个是用来保存所有内容的新元素—一个内容容器。我给了它一个类

n-resizable-topcontent

，所以它很突出

对初始代码的主要更改是更改新容器元素的高度，而不是使用调整大小的元素的

top

位置。当按

方向调整大小时，jQuery UI将调整

top

和

height

——我们不会向上移动元素，而是隐式收缩其上方的元素（容器）和其中的任何内容

如果您担心元素太少或嵌套元素太多，这通常不是问题，最好确定它是如何工作的。使用CSS定位并不总是容易或直接的，更困难的事情之一是自动高度-如果不将每个元素配置为特定高度，很难告诉元素占用垂直空间的“剩余部分”

我能提供的最好建议是：保持简单。如果您需要一个特定的元素来做太多的事情，那么它很快就会变得不可能，并且使用看起来像是冗余的HTML、css、js等来定位所有应该做的事情也不会有什么害处

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

基于@MuhammadAref的答案来限制高度-

我得到了，这就是为什么：

CSS

#包装器{
位置：固定；
宽度：100%；
高度：100vh；
}
.n-可调整大小的-topcontent{
身高：70%；
背景色：#0098ff；
}
.可调整大小{
宽度：100%；
身高：30%；
背景色：红色；
}

HTML


这里有一些文字
这里有一些文字
这里有一些文字
可调整大小

Javascript

$（“.resizable”）.resizable({
自动隐藏：对，
句柄：“n”，
调整大小：函数（事件、ui）{
//母公司
var parent=ui.element.parent（）；
var parent_height=parent.height（）；
//获取高度的最小值或父高度的70%
//获取高度的最大值或父高度的30%
变量高度=数学最小值（ui.size.height，父项高度*0.7）；
高度=数学最大值（高度，父项高度*0.3）；
//为可调整大小的元素设置高度，并且不更改顶部位置。
//相反，将调整上一个元素内容容器。
ui.size.height=高度；
ui.position.top=0；
//使内容容器的高度小于父容器的100%。可调整大小
ui.element.prev（'.n-可调整大小的-topcontent'）.height（父元素高度-高度）；
}
});

怎么用？我已经将

#wrapper

分为两个元素，其中一个元素是一个