根据包含更多内容的div动态更改多个div的高度

Question

我有一个包含两个子部分的区域，其中任意一个子部分都可以决定另一个子部分的大小。

这里有一个快速的codepen演示: 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似乎会在它们浮动的侧面转换。

提前感谢！

- liloka

---

帖子没有任何问题，却获得了两个赞……奇怪。 - Jai

请详细说明这里的问题是什么？ - divy3993

抱歉，我盯着它看了太久，错过了实际的问题。我已将其添加到原始问题中。高度不匹配，它们没有填充包围部分，div似乎在它们浮动的侧面切换。 - liloka

我知道你想表达什么，但很明显原帖的问题描述已经花费了时间，这值得点赞。此外，示例代码展示了问题，图片则是作者所需。 - A1rPun

我没有完全理解你的问题，但人们会认为，由于你将大小设置为100％，div将会根据你拥有的内容大小进行拉伸。 - abetwothree

Answer 1

使用flexbox。

如果您在.group-section中更改为display: flex;，它们将填充其空间。 由于默认值，项目将按默认方式进行伸展，然后进行拉伸。 您还需要删除代码和文档中的100％高度，因为这既是必要的，也强制使小项保持小。

您可能应该重写css以更符合flexbox的方式。使用正确的flexbox，您不必关注到达的部分数量。

如果您不熟悉flexbox，则可以阅读此文。

- magnudae

---

这不是一个有效的解决方案吗？Flexbox 就是为此而创建的。 - magnudae

问问那些给负评的人。在这里，负评者通常不会暴露自己的身份。这很令人沮丧，但这是事实。然而，它并不需要使用 flexbox，它与 inline-block 的行为相同。唯一的问题是将浮动混合在一起，而 OP 已经解决了这个问题。 - Marcos Pérez Gude

感谢马可斯的出色回复。我知道，在这里你不需要 flexbox，但它在类似的情况下可能会有所帮助。 - magnudae

我最初点了个踩，因为问题不清楚，我误解了被问的内容。现在我已经点了个赞，因为这是有效的解决方案。 - GMchris

我认为正确答案来自@BrianRay。我也误解了问题，因为OP没有很好地解释问题和需要什么。 - Marcos Pérez Gude

谢谢GMchris。非常感谢。 - magnudae

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

Here's a pen.

- Brian Ray

---

Foundation API有相同的类名：http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html - Marcos Pérez Gude

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

- Jamie Paterson

Answer 4

因此，看起来问题在于内部元素或至少其中一些具有 float 左侧或右侧。这是可以的，但浮动元素需要被清除，否则它们不会真正与其他元素交互。为了解决您的问题，我建议将此常见类添加到您的 CSS 中，并将其应用于容器：

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

- GMchris

---

你是指两侧的内容容器还是包含它们的外部容器？我已经分别尝试过它们，但都没有成功。 - liloka