根據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的高度

回答

相關問題