2011-12-07 35 views
1

我有以下情況:http://jsfiddle.net/F3SqM/2/如何搭配浮動兄弟的div的高度

我有兩列,我只知道columnB的高度。兩列都是浮動的,我希望columnA匹配columnB的高度(因此是全高)。

我試着在columnA上設置相對於父級的高度:100%,但是這隻在父級具有指定高度時才起作用,因爲不在高度:100%。不幸的是,父級的高度依賴於columnB,而B級的高度不能是靜態的。

我環顧四周,嘗試了我找到的潛在解決方案,但沒有一個能夠工作,因爲我在網上發現的大多數場景都是處理具有指定高度的容器。有任何想法嗎?

回答

6

個人而言,我喜歡從www.ejeliot.com

http://jsfiddle.net/spacebeers/s8uLG/3/

的高度相等欄時設定你的容器了溢出設置爲隱藏,然後在每一個DIV加負邊距和相等的正填充-底部。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

人造列也不錯,可能更容易建立,但是,如果你反對使用的圖像是真的死了,這是一個不錯的方法。

+1

感謝這個很酷的技術,我在這裏豐富了這個概念:http://jsfiddle.net/jplew/yPMVJ/ –

0

你可以把B列中柱A,這會使列A包裹B並因此佔據相同的高度。

-1

您可以使用javascript更改任何其他對象的高度,但不能單獨使用CSS。

你說B的高度是動態的,但沒有你的代碼,有點難以理解爲什麼它可以是動態的,以及我如何爲你寫js代碼。

+0

啊,我beent儘量避免使用JavaScript,但它似乎要朝在這個方向上,我正在爲它編寫代碼,columnB的高度是動態的,因爲它列出了一個投資組合的圖像(左欄是爲投資組合添加描述)。每個投資組合,所以每個投資組合的高度將不同於下一個。 – Prusprus

0

你可以給需要高度父元素在this例如