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

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

我在这里画了一个快速代码笔：

.outersection{
宽度：100%；
溢出：滚动；
高度：100vh；
}
.小组组{
显示：块；
边框：蓝色1px实心；
填充：5px0；
身高：100%；
}
.代码，.文档{
宽度：50%；
显示：内联块；
边框：1px纯绿色；
身高：100%；
溢出：自动；
}

我只尝试了JQuery和CSS，但是其中有两个以上的部分，每个部分需要不同的高度。这两种尝试都不起作用，而且我不相信JQuery方式对于所有部分都是动态的

问题是双方的高度都不匹配，然后双方似乎到处都在浮动。它们并没有填满包围区，潜水艇似乎在浮动的一侧进行切换

---

提前谢谢

因此，这里的问题似乎是内部元素或至少其中的一些元素具有

浮动

左或右。这很好，但浮动元素需要清除，否则它们将无法与其余元素正确交互。为了解决您的问题，我建议将此公共类添加到css中，并将其应用到容器：

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

使用flexbox

如果更改为

display:flex

在

分组部分

他们将填写他们的空间。 由于默认值，项目将作为默认值拉伸，然后拉伸。 您还需要删除代码和文档上的100%高度，因为这是必要的，并且会迫使小项目保持小

您可能应该重写css，使其更适合flex——“某种方式”。正确使用flexbox后，您无需知道到达的节数

---

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

我为所有需要等高的元素添加了一个

自动高度

类。然后我编写了一个小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);
});

---

这里有一个。

尝试一些简单的方法，比如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>

---

嗯，毫无疑问地投了两张赞成票……奇怪，这是一个糟糕的问题。但是，如果我理解的很好，您的问题是您的浮点：

.code{float:right；}

它会破坏您的布局，并且蓝色边框不适合。请详细说明这里的问题是什么？也许您需要这个：。请避免浮动到布局。我们在2016年，这种布局技术需要消失。浮动是针对浮动元素的，而不是针对layouts@Jai我知道你想说什么，但很明显，OP在这个问题上花了时间，值得投票表决。此外，小提琴显示了问题，图片是OP想要的：）这怎么不是一个有效的解决方案？Flexbox就是为了这个目的而创建的。请询问。这里的下层选民往往不露面。这很令人沮丧，但这是真的。然而，它不需要flexbox，它的行为与内联块相同。唯一的问题是混合浮动，让它感谢你马科斯的伟大回应。我知道，这里不需要flexbox，但在类似的情况下它可能会有所帮助。我最初投了反对票，因为问题不清楚，我误解了被问到的内容。现在投票表决，因为它是有效的解决方案。我认为正确的答案来自@BrianRay。我也误解了这个问题，因为OP没有很好地解释这个问题和什么需要基础API只有一个类名就得到了相同的结果：你是指两个内容容器还是同时包含它们的外部容器？我两个都试过了——不是同时试的，两次都没用。

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