重新調整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) 
 
      \t newhgt = bsh - Math.abs(diff); 
 
     else 
 
     \t newhgt = bsh + diff; 
 
    \t 
 
     $('#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而調整大小，並且還北部手柄當重新大小停止時。我還需要減少#footC div的頂部，因爲我正在動態調整#footS div的大小。任何形式的幫助都會有所幫助。

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){ 
 
    \t var newFSH = ui.size.height; 
 
    \t 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>

而且，我也添加了名爲 「鬼：真正的」 一個選項，jQuery的可調整大小的小部件。