根据div动态更改多个div的高度

我有一个部分，分为两部分。这些小节中的任何一个都可以确定另一个的大小。根据div动态更改多个div的高度

而且我已经开了快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方式对于所有部分都是足够动态的。

问题是双方都没有达到匹配的高度，然后双方似乎都处处浮动。它们不填满装箱部分，而且divs似乎切换它们浮动的边。

在此先感谢！

来源

2016-02-05 liloka

井两只upvotes为岗位没有任何问题....奇怪。 – Jai

这是个问题不好的问题。然而，如果我理解的很好，你的问题就是你拥有的浮点数：'.code {float}：right; }'它崩溃了你的布局和蓝色的边框不适合 –

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

使用flexbox。

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

您可能应该重写css以更适合flex-“某种方式”。正确使用Flexbox时，您不必知道有多少部分到达。

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

来源

2016-02-05 14:03:31 magnudae

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

要求downvoter。往往这里downvoters不显示他的面孔。这是令人沮丧的，但这是事实。但是，它不需要flexbox，它的行为与inline-block相同。唯一的问题是混合花车，而OP有它 –

谢谢马科斯的回应。我知道，在这里你不需要Flexbox，但它可能有助于类似的情况。 – magnudae

-1

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

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

来源

2016-02-05 14:00:09 GMchris

您是指双方内容容器还是外界都涉及它们两个？我已经尝试过两种方法 - 不是同一时间，也没有任何时间。 – liloka

我向所有需要相同高度的元素添加了一个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。

来源

2016-02-05 14:06:41

Foundation API只有一个类名：http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html –

尝试一些简单的像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%; 
}

来源

2016-02-05 14:20:18

根据div动态更改多个div的高度

回答

相关问题