在父高度内垂直调整 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>

在上面的demo中可以清楚的看到，由于使用了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);
 }

希望对你有用

Answer 2

CSS3 flexbox 没有得到很好的支持，可能不太适合这个任务。在元素上设置 resize: vertical 并使用 javascript 侦听器在调整大小时调整所有 div 的大小。我不知道您想要实现调整大小的具体程度，而且我没有耐心免费从头开始编写涉及的内容，但是我可以为您提供的是一个小 javascript，它可以帮助您向所有人添加事件侦听器类的元素。

function resizeboxes() {
    //resize your boxes here.
}

sections = document.querySelectorAll(".resizable-boxes");
for(i = 0; i < sections.length; i++){
    sections[i].addEventListener("resize", resizeboxes);
}