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

问题描述

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

I'm trying to create a 100% height vertical sidebar that has N number of resizable children elements - something like Facebook sidebar (chat...) or Photoshop's sidebar

如果子代的高度不超过父代的高度，而另一个元素的大小要相应调整，则实际上增加的子代高度应始终与父代的高度(100％)相匹配.

where the children do not exceed the parent height and resizing one element the other should resize accordingly, so practically the added children heights should always match the (100%) parent height.

我试图调整表行的大小，但是又没有成功...
到目前为止，我使用 CSS3 flex (似乎是个好主意):(

I tried to resize table rows but again without success...
This what I have so far using CSS3 flex (seemed like a good idea) :(

$("#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无法调整元素的大小....

You can clearly see in the above demo that due the use of flex jQuery is unable to resize the elements....

您将如何解决此问题(没有插件)? 谢谢

How would you approach to this problem (without plugins)? thanks

推荐答案

原来我毕竟有一段时间:) 小提琴

Turned out i had some time after all :) fiddle

因此，其中的关键代码是，当您开始调整大小时，您还选择了一个邻居，您也要这样调整大小:

So key code in this is that when you start resizing you select a neighbour you also want to resize as such:

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

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

And store it's height. Then when we resize, we also resize the other one as such

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

希望对您有用

这篇关于在父级高度内垂直调整DIV元素的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！