如何创建Jquery两个Div水平调整大小

Question

我想创建两个水平可重复大小的div，但是当第一个高度增加时，第二个高度必须减小，并且两者都有一个共同的父级，其高度和高度相同。宽度为100％;因此，当我们增加或减少两个div的高度时，它们必须保持在父div的高度; 这是我的代码，请提供jquery代码和css代码;我正在使用jquery-1.11.2.js和jquery-ui.min.js。

<div id="parent" style="height:100%;width:100%> <div id="div1"> My Data </div> <div id="div2"> My Data </div> </div>

Answer 1

使用jquery UI resizable（）创建它并侦听调整大小事件

转到： Working Demo jsfiddle

<div id="parent">
   <div id="div1"> My Data1 </div> 
    <div id="div2"> My Data2</div> 
</div>

jquery 1.9.1＆amp; jquery UI

$("#div1").resizable();
    $('#div1').resize(function(){
       $('#div2').width($("#parent").width()-$("#div1").width()); 
    });

更新：侦听浏览器窗口调整大小

$(window).resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 
});