javascript - 在父级高度内垂直调整 DIV 元素的大小

Question

^{看到反对票让士气低落，我真的尽了最大努力(我相信)解释我的问题并保持简短。如果您发现问题难以理解，我愿意跟进任何改进建议:,(}

我正在尝试创建一个 100% 高度的垂直侧边栏，其中有 N 个可调整大小的子元素 - 类似于 Facebook 侧边栏(聊天...)或 Photoshop 的侧边栏

如果子元素不超过父元素高度并且调整一个元素的大小，另一个元素应该相应地调整大小，因此实际上添加的子元素高度应该始终匹配(100%)父元素高度。

我尝试调整表格行的大小，但还是没有成功...
这是我目前使用 CSS3 flex 的结果(看起来是个好主意):(

$("#panel>div").resizable({
  handles:'s'     /* try using "n" to see what happens... */
});

*{margin:0; box-sizing: border-box;}
html, body{height:100%;}
[class^=ui-resizable]{height:2px;background:#08f;cursor:row-resize;}

#panel{
  display:flex;
  flex-direction: column ;
  height:100%;
  width:200px;
}
#panel>div{
  flex: 1;
  background:#aaa;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="panel">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

在上面的演示中你可以清楚地看到，由于使用flex jQuery 无法调整元素的大小....

你会如何解决这个问题(没有插件)？ 谢谢

Answer 1

结果我毕竟还有一些时间:) fiddle

所以这里的关键代码是当你开始调整大小时你选择一个你也想调整大小的邻居:

if ($(this).next('.resiz').length>0){
    other= $(this).next('.resiz');
 }else{
    other = $(this).prev('.resiz');
 }
 startingHeight= other.height();

并存储它的高度。然后当我们调整大小时，我们也调整另一个的大小

 resize:function(e,ui){
     var dh = ui.size.height-ui.originalSize.height;
     if (dh>startingHeight){// can't resize the box more then it's neighbour
         dh =  startingHeight;
         ui.size.height = ui.originalSize.height+dh;
     }
     other.height(startingHeight-dh);
 }

希望对你有用