像JSFiddle這樣的面板

Question

我有這個，

我想要，

小提琴

當Seconds標簽上升時，我想減少第一部分的高度，最小前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

 $('#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; 為#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 2

試試下面這行

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

代替

<div id="first">

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

實例

最小的例子

完整的例子

---

說明

您的第二條評論接近所有要求。

“關鍵洞察力”是，為了約束一個元素的最小高度，足以約束另一個元素的最大高度。 如果頂部元素不能高於250，則底部元素不能小於50（以保持容器高度恆定為300）。

相關的JavaScript

// initialise dimensions
var containerHeight = $("#container").height();
var minHeight = containerHeight * 0.30; // min 30% height
var maxHeight = containerHeight - minHeight;

// call rebalance once on page load to make sure the panels start off right
rebalance()

$("#top").resizable({
      handles: 's',
      maxHeight: maxHeight,
      minHeight: minHeight,
      resize: rebalance // whenever we resize, rebalance the panels
});

function rebalance() {
    var currentTopHeight = $("#top").height();
    $("#bottom").height(containerHeight - currentTopHeight);    
}

我也冒昧地清理你的代碼了。 我認為你在標題后填充空格有CSS問題，一旦修復，調整大小相當簡單。 我用注釋來注釋CSS，以解釋發生了什么。 您可能還對此處的討論感興趣： 使div填充剩余屏幕空間的高度

相關的CSS

/* both containers are full-width, and absolutely positioned in their parent */
#first, #second {
    position:absolute;
    width:100%;
}
/* pin the first to the top, and the second to the bottom */
#first {
    top:0;
}
#second {
    top:50%;
    bottom:0;
}

/* The body needs to leave space at the top for the header (25px) but none at the bottom */
#first-body, #second-body {
    overflow-y:auto;
    width:100%;
    position:absolute;
    top:25px;
    bottom:0;
}

Answer 5

我遇到了一個非常有前途的插件： http ： //nathancahill.github.io/Split.js/

Split.js是一個輕量級，不受影響的實用程序，用於創建可調整的拆分視圖或窗格。

不需要依賴項或標記，只需要兩個或多個具有公共父項的元素。

視圖可以水平或垂直分割，每兩個元素之間插入可拖動的水槽。

甚至有一個JS小提琴風格的演示 。

示例JS（來自演示）：

Split(['#a', '#b'], {
   gutterSize: 8,
   cursor: 'col-resize'
})

Split(['#c', '#d'], {
   direction: 'vertical',
   sizes: [25, 75],
   gutterSize: 8,
   cursor: 'row-resize'
})

Split(['#e', '#f'], {
   direction: 'vertical',
   sizes: [25, 75],
   gutterSize: 8,
   cursor: 'row-resize'
})

示例html用法（來自演示）：

<div id="a" class="split split-horizontal">
   <div id="c" class="split content"></div>
   <div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
   <div id="e" class="split content"></div>
   <div id="f" class="split content"></div>
</div>