Изменение размера div должно пропорционально изменить размер другого div

Question

Я вставил свой код JS, CSS и HTML соответственно ниже.

var hgt=0,newhgt=0,bsh=0,diff=0;

$('#footS').resizable({
    alsoResize:"#footC",
    handles:"n",
    start: function(event,ui){
        oldhgt = ui.size.height;
        bsh = $('#bodyS').height();
    }, resize:function(event,ui){
         diff = oldhgt - ui.size.height;
         if(diff<0) 
          newhgt = bsh - Math.abs(diff);
         else
         newhgt = bsh + diff;
   
       $('#bodyS').height(newhgt);
    }, stop:function(event,ui){
     newhgt = bsh - Math.abs(oldhgt - ui.size.height);
     $('#bodyS').css("height",newhgt+"px");
     $('#bodyC').css("height",newhgt+"px");
     $('#footS').css("height",ui.size.height+"px");
    }
});

#vscale,#canvas { 
        height: auto; 
        width: auto; 
       /* border: 1px solid gray; */
        margin-left: 5px; 
        float: left;
        position:absolute;
}
#canvas{
  margin-left:100px;
}
.scale { 
height:150px;
width:50px;
border: 1px dotted gray;
}
#headS,#headC{border-color: red;min-height:50px;}
#bodyS,#bodyC{border-color: blue;min-height:50px;}
#footS,#footC{border-color: green; min-height:50px;}
.ui-resizable-helper {
    border: 1px dotted #999;
}
.fscale{top:0.0px;position:relative;}

.cont{
  border: 1px dotted gray;
  height:150px;
  width:auto;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="vscale" style="top:75px;">
  <div id="headS" class="scale">HScale</div>
  <div id="bodyS" class="scale">BScale</div>
  <div id="footS" class="scale fscale">FScale</div>
</div>
<div id="canvas" style="width:300px;top:75px;">
  <div id="headC" class="cont">HeadContainer</div>
  <div id="bodyC" class="cont">BodyContainer</div>
  <div id="footC" class="cont">FootContainer</div>
</div>

Проблема в том, что когда я изменяю размер северного маркера #footS div, я не могу изменить высоту #bodyS div и #bodyC div при изменении размера, а также когда изменение размера останавливается. Мне также нужно уменьшить верхнюю часть div #footC, так как я динамически изменяю размер div #footS. Любая помощь будет полезна.

Answer 1

Ниже приведена логика, которую я написал, чтобы получить изменение размера для #bodyC и #bodyS соответственно.

var oldFSH=0,newBSH,oldBSH=0,diff;
$('#footS').resizable({
    ghost:true,
    handles:"n",
    start: function(event,ui){
        oldFSH = $('#footS').height();
        oldBSH = $('#bodyS').height();
        newBSH=diff=0;
     
    }, resize:function(event,ui){
     var newFSH = ui.size.height;
     diff = oldFSH > newFSH?oldFSH - newFSH:newFSH - oldFSH;
        newBSH = oldFSH > newFSH?oldBSH+diff:oldBSH-diff;
        $('#bodyS,#bodyC').height(newBSH);
      
    }, stop:function(event,ui){
        var newFSH = ui.size.height;
        $('#bodyS,#bodyC').css("height",newBSH+"px");
        $('#footC').css("height",newFSH + "px");
        $("#footS").css("top","0px");
    }
});

#vscale,#canvas { 
        height: auto; 
        width: auto; 
       /* border: 1px solid gray; */
        margin-left: 5px; 
        float: left; /*Here you can also use display: inline-block instead of float:left*/
        position:absolute;
}
#canvas{
  margin-left:100px;
}
.scalecont { 
height:144px;
border: 1px dotted gray;
}

.bodycss{
height:200px;
border: 1px dotted blue;
}

#footS{top:0px;position:relative;}

#headC,#bodyC,#footC{width:auto;}

.ui-resizable-helper {
    border: 1px dotted #999;
}

<div id="vscale" style="top:100px;">
  <div id="headS" class="scalecont">HScale</div>
  <div id="bodyS" class="bodycss">BScale</div>
  <div id="footS" class="scalecont">FScale</div>
</div>
<div id="canvas" style="width:300px;top:100px;">
  <div id="headC" class="scalecont">HeadContainer</div>
  <div id="bodyC" class="bodycss">BodyContainer</div>
  <div id="footC" class="scalecont">FootContainer</div>
</div>

Кроме того, я добавил опцию "ghost:true" в виджет с изменяемым размером jquery.