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

Posted 2023-03-05

【中文标题】根据具有更多内容的div动态更改多个div的高度[重复]

【英文标题】：Changing heights of multiple divs dynamically depending on div with more content [duplicate]

【发布时间】：2016-05-15 12:50:36

【问题描述】：

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

我在这里草拟了一个快速的代码笔：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 似乎会切换它们漂浮在上面的边。

提前致谢！

【问题讨论】：

没有任何问题的帖子有两个赞成票......奇怪。

这是一个不好的问题。但是，如果我理解得很好，您的问题是您的浮动：.code float: right; 它会使您的布局崩溃并且蓝色边框不适合

请详细说明这里有什么问题？

也许这是您需要的：codepen.io/anon/pen/zrmqGw。请避免浮动到布局。我们在 2016 年，这种布局技术需要消失。浮动用于浮动元素，不适用于布局

@Jai 我知道你想说什么，但很明显，OP 已经在问题本身上投入了时间，这值得一票。小提琴也显示了问题，图片就是OP想要的:)

【参考方案1】：

使用弹性框。

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

您可能应该重写 css 以使其更适合 flex-“一种方式”。通过正确使用 flexbox，您不必知道到达了多少部分。

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

【讨论】：

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

要求投反对票。通常情况下，这里的反对者不会露面。这令人沮丧，但这是真的。但是，它不需要 flexbox，它的行为与 inline-block 相同。唯一的问题是混合浮动，OP 有它

感谢 Marcos 的出色回应。我知道，您在这里不需要 flexbox，但它可以在类似情况下提供帮助。

我最初投了反对票，因为问题不清楚并且我误解了所问的内容。现在支持它，因为它是有效的解决方案。

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

【参考方案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。

【讨论】：

Foundation API 也只有一个类名：foundation.zurb.com/sites/docs/v/5.5.3/components/…

【参考方案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%;

【参考方案4】：

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

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

【讨论】：

您是指双方的内容容器还是涉及它们的外部？我已经尝试过这两种方法 - 不是同时尝试过，而且两次都没有用。