两个彼此相对的可调整大小的 div

Question

我想让两个 div 垂直调整大小。例如

顶部 div 高度为 400 像素，底部 div 高度为 200。当我将底部 div 调整为 250 像素时，顶部 div 高度应为 350 像素。

我正在使用可调整大小的 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/