子div的定義父母高度

<body> 
<div id="parent"> 
    <div id="childRightCol"></div> 
    <div id="childLeftCol"></div> 
</div> 
</body>

父母的身高假設是動態的，並延伸到孩子定義的最大高度。 ChildRight動態改變高度，但我希望它是父母的100％高度。 ChildLeft有時會定義父級的高度。子div的定義父母高度

問題是因爲ChildLeft定義了父級的高度。身高：100％因爲父母的身高未定義而無法正常工作。請幫忙。

id="news-flicker-container" 
id="news-flicker-userbars"

來源

2011-07-23 Harrison Tran

而不是使用display: none和display: block切換知名度，使用visibility: hidden和visibility: visible，它保持元素的大小。

爲防止物品在彼此頂部堆疊，您必須進行補償。這可以通過將所有物品浮動到彼此的左側來實現，並且除了第一個以外的所有物品都給予所有物品以消除餘量，因此它們都保持在相同的位置。

請參閱this demo fiddle它演示了兩種情況，即一個文章與較低的高度，然後右欄和一個較大的高度，然後右欄。在這兩種情況下，左列的高度（最大文章的高度）決定了父div的高度。

對CSS的基本要求：

#news-flicker-container { 
    float: left; 
} 
#news-flicker-userbars { 
    float: left; 
} 
#news-flicker-container article { 
    width: 100%; 
    visibility: hidden; 
    float: left; 
    margin-left: -100%; 
} 
#news-flicker-container article:first-child { 
    margin-left: 0; 
}

來源

2011-07-23 09:09:13 NGLN

如果最大的元素不是第一篇文章，這是否工作？ –

它適用於每篇最大的文章，請參閱[小提琴]（http://jsfiddle.net/8aGr9/2/）第一篇文章是最大的。第一篇文章的特殊風格僅僅是因爲第一篇文章已經到位/在正確的位置。給它一個負邊距將會使其不在列中。 – NGLN

@Harrison如果這不起作用：僅僅將這個CSS複製到你自己的程序中並不能完成整個技巧：它只是它的一個工作原理樣本。例如。我剛剛看到你的文章是左欄中另一個div的孩子，所以你必須根據你的具體情況重寫我的例子。對於我/我們來說，這有點困難，因爲你自己並沒有提供CSS或實際結構。如果您想要一個完整的答案，請提供css和實際標記。 – NGLN

Equal Height Columns with Cross-Browser CSS

如果您不需要支持IE 6和7，這將是一個更好的辦法：

Use CSS display:table for Layout

來源

2011-07-23 08:29:55

顯示錶不爲我工作由於某種原因，我會嘗試另一種，但後來一個簡單的CSS的解決方案將是很好。 –

這不起作用，因爲OP用'display：none'隱藏了左欄的孩子，而其中一個隱藏的孩子必須設置高度。 – NGLN

子div的定義父母高度

回答

相關問題