两个 div 彼此相对调整大小

Question

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

顶部 div 高度为 400px，底部 div 高度为 200。当我调整底部 div 250px 然后顶部 div 高度应该是 350px.

我正在使用 jQuery UI 可调整大小：

Fiddle 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/

两个 div 彼此相对调整大小

Two div re sizable opposite to each other

css

jquery

jquery-ui

resizable