根据具有更多内容的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，但这些部分中将有2个以上，每个部分都需要不同的高度。这两种尝试都没有用，我不相信JQuery方式对于所有部分都是动态的。

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

提前致谢！

Answer 1

使用flexbox。

如果您更改为display: flex;中的.group-section，他们将填写他们的空间。 由于默认值，项目将默认拉伸，然后伸展。 您还需要删除代码和文档的100％高度，因为这是必要的，并强制小项目保持小。

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

如果您不熟悉flexbox，可以阅读this。

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

这里是pen。

Answer 3

尝试像flexbox这样简单的东西： -

<div class="flex">
<article>
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
<article class="third">
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
</div>

CSS

    .flex {
    display: flex;
    flex-flow: row nowrap;
    width: 400px;
}
article{
  border:1px solid black;
  flex: 2 2 60%;
  width: 60%;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
}
article.third{
    flex: 1 1 30%;
    width: 32%;
}

Answer 4

所以，这里的问题似乎是内部元素或至少其中一些元素左侧或右侧float。这很好，但需要清除浮动元素，否则它们将无法正确地与其余元素进行交互。要解决您的问题，我建议将此公共类添加到您的css中，并将其应用于容器：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}