在父高度

Question

^{Demoralizes to downvotes ，我真的尽我所能（我相信）解释我的问题并保持简短。如果您发现难以理解的问题，我愿意跟进任何改进建议：（}

我正在尝试创建一个 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

CSS3 flexbox不受支持，可能不太适合这项任务。设置resize：对元素进行垂直处理，并在调整大小时使用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);
}

Answer 2

原来我毕竟有一段时间:) 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);
 }

希望对你有用