Question

我在下面分别粘贴了我的JS代码，CSS和HTML。

＆＃13;

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");
    }
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

问题是当我重新调整#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){
    	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>

而且，我还在jquery可调整大小的小部件中添加了一个名为“ghost：true”的选项。

重新调整div的大小应该按比例重新调整其他div的大小

1 个答案: