javascript - 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 の高さを変更できないことです。#footS div のサイズを動的に変更しているため、#footC div の上部も減らす必要があります。どんな種類の助けも役に立ちます。