根据具有更多内容的div动态更改多个div的高度

Question

我有一个部分,在两个部分内.这些小节中的任何一个都可以确定另一个小节的大小.

我在这里编写了一个快速的代码:http://codepen.io/anon/pen/QyZbev

.outersection {
  width: 100%;
  overflow: scroll;
  height: 100vh;
}

.group-section {
  display: block;
  border: blue 1px solid;
  padding: 5px 0;
  height: 100%;
}

.code, .documentation {
  width: 50%;
  display: inline-block;
  border: 1px solid green;
  height: 100%;
  overflow: auto;
}

我只用JQuery和CSS试过这个,但是这些部分中有两个以上,每个都需要不同的高度.这两种尝试都没有用,我不相信JQuery方式对于所有部分都是动态的.

问题是双方都没有达到匹配的高度,然后双方似乎到处漂浮.它们没有填充封装部分,而div似乎会切换它们浮动的边.

提前致谢!

Answer 1

使用flexbox.

如果你换到了display: flex;,.group-section他们会填补他们的空间.由于默认值,项目将默认拉伸,然后伸展.您还需要删除代码和文档的100%高度,因为这是必要的,并强制小项目保持小.

你可能应该重写css以适应更多的灵活 - "一种方式".正确使用flexbox后,您无需了解到达的部分数量.

如果您不熟悉flexbox,可以阅读本文.

Answer 2

我auto-height为所有需要等高的元素添加了一个类。然后我写了一个小 jQuery 函数来计算哪个元素是最大的，并将它们全部设置为那个高度。

function thisHeight(){
    return $(this).height();
}
$('.group-section').each(function(){
    var height = Math.max.apply(Math, $(this).find('.auto-height').map(thisHeight));
    $(this).find('.auto-height').height(height);
});

这是一支笔。