像 JSFiddle 这样的面板

Question

我有这个，

我要，

当“秒”选项卡上升时，我想降低第一个部分的高度，始终显示最小第一个 2，与第二个部分相同。

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    resize: function () {
        var b = $('#second').height();
        var a = $('#first').css("height", b + "px");
        console.log(a.height());
    }
});

编辑

必须有——我希望它像 JSFiddle "HTML" 和 "JavaScript" 面板一样工作，它们都可以调整大小，但也有最小高度，如您在此处看到的那样

http://jsfiddle.net/

Answer 1

试试下面的行

<div id="first" style="min-height:35%;overflow:hidden">

而不是

<div id="first">

Answer 2

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    maxHeight: 300,
    minHeight: 150,
    resize: function (event, ui) {
        var h = ui.size.height;
        $('#first').height(400 -h);
    }
});

#main {
    width:100%;
    height:400px;
    overflow: hidden;
    position: relative;
}

#first, #second {
    height:200px;
    width: 100%;
    overflow-y: scroll;
}

#second {
    z-index:999;
    position: absolute;
}

#first-head, #second-head {
    background-color:red;
}

#ngrip {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    bottom: -5px;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<div id="main">
  <div id="first">
    <div id="first-head">
      <h3>First</h3>
    </div>
    <div id="first-body">
      <p>First-1</p>
      <p>First-2</p>
      <p>First-3</p>
      <p>First-4</p>
      <p>First-5</p>
      <p>First-6</p>
    </div>
  </div>
  <div id='second'>
    <div id="second-head">
       <h3>Second</h3>
       <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    </div>
    <div id="second-body">
      <p>Second-1</p>
      <p>Second-2</p>
      <p>Second-3</p>
      <p>Second-4</p>
      <p>Second-5</p>
      <p>Second-6</p>
    </div>
  </div>
</div>

使用 JqueryUI 的 minHeight 和 minHeight 选项结合 CSS display: absolute; for #second

首先，在 HTML 中更改调整大小的方向（从 ui-resizable-s 到 ui-resizable-n）

 <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>

其次，使用Javascript中的JqueryUI选项：

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    maxHeight: 300,    // Example max height of `#second` is 300px
    minHeight: 100,    // Example min height of `#second` is 100px
    resize: function (event, ui) {
        // Get height of `#second`
        var h = ui.size.height;

        // Set height of `#first`          
        $('#first').height(400 - h);    //400 is height of container `#main`
    }
});

最后，改一些CSS

#main {
    width:100%;
    height:400px;
    overflow: hidden;
    position: relative;
}

#first, #second {
    height:200px;
    width: 100%;
    overflow-y: scroll;
}

#second {
    z-index:999;
    position: absolute;
}

#first-head, #second-head {
    background-color:red;
}

#ngrip {
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    bottom: -5px;
    left: 50%;
}

希望对你有帮助。

Answer 3

请检查此演示 JS Fiddle。对你有用。

HTML

<div id="main">
  <div id="first">
    <div id="first-head">
       <h3>First</h3>
    </div>
    <div id="first-body">
      <p>First-1</p>
        <p>First-2</p>
        <p>First-3</p>
        <p>First-4</p>
        <p>First-5</p>
        <p>First-6</p>
    </div>
  </div>
  <div id='second'>
    <div id="second-head">
       <h3>Second</h3>
       <div class="ui-resizable-handle ui-resizable-s" id="ngrip"></div>
    </div>
    <div id="second-body">
      <p>Second-1</p>
      <p>Second-2</p>
      <p>Second-3</p>
      <p>Second-4</p>
      <p>Second-5</p>
      <p>Second-6</p>
      <p>Second-7</p>
      <p>Second-8</p>
      <p>Second-9</p>
    </div>
  </div>
</div>

CSS

#main {
    width:100%;
    height:400px;
}
#first, #second {
    min-height:100px;
    height:170px;
    max-height:400px;
}
#second-body{
   z-index:9999;
}
#first-head, #second-head {
    background-color:red;
}
#first-body, #second-body {
    overflow-y:auto;
    height:100%;
     margin-bottom:10px;
}
#ngrip {
        position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    top:0px;
    left: 50%;
}

jQuery

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    resize: function () {
        var b = $('#second').height();
        var height=$('#main').height();
        var a = $('#first').css("height", b + "px");
        var first=$('#first').height();
        $('#second').css("height",height- first+ "px");
    }
});

Answer 4

实例

Minimal Example

Full Example

说明

您的第二条评论已接近所有要求。

"key insight"就是，要约束一个元素的最小高度，约束另一个元素的最大高度就可以了。如果顶部元素不能高于 250，那么底部元素不能小于 50（以保持 300 的恒定容器高度）。

像 JSFiddle 这样的面板

Panels like JSFiddle

html

javascript

css

jquery

internet-explorer-8

实例

说明

相关JavaScript

相关CSS