两个div相互对立

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/