兩格可以相對於彼此

Question

我想使兩個div可以垂直調整大小。例如

頂部div高度爲400px，底部div高度爲200.當我調整底部div的大小爲250px時，頂部div的高度應爲350px。

我使用jQuery UI調整大小：

小提琴here

 $(document).ready(function() { 
 
      $(".dv-bottom").resizable({ 
 
      handles: { 
 
       'n': '.handle' 
 
      } 
 
      }).on("resize", function(event, ui) { 
 
      $('.dv-bottom').height(600 - ui.size.height); 
 
      $('.dv-top').css({ 
 
       top: '0' 
 
      });; 
 
      }); 
 
     });

<div class="dv-top"> 
 
</div> 
 
<div class="dv-bottom"> 
 
    <div class="ui-resizable-handle ui-resizable-n handle"></div> 
 

 
    <div class=" pane-content"> 
 

 
    </div> 
 

 
</div>

Answer 1

做這樣的事情上調整大小：

hBottom = ui.size.height 
$('.dv-bottom').height(hBottom).css('top',0); 
hTop = 600 - hBottom; 
$('.dv-top').height(hTop); 

演示： https://jsfiddle.net/ofem40cf/