使得浮動的div填補垂直空間時空間動態

考慮以下幾點：使得浮動的div填補垂直空間時空間動態

+----------------------------------------+ 
| Div A         | 
|          | 
| +----------+ +-------------------+ | 
| | Div B | | Div C    | | 
| |   | |     | | 
| +----------+ |     | | 
|     |     | | 
?     ?     ? ? 
|     +-------------------+ | 
+----------------------------------------+

一個股利同時包含B和C.

事業部B就永遠只能持有的內容一行。

Div C包含變量項目計數列表，因此高度高度可變。

Divs B和C具有設定的寬度。

事業部C'S高驅動器事業部A的高度

我怎樣才能使事業部B上下移動擴展，以便與事業部C的未知高度？

由於各種原因不值得進入，表格在這種情況下不起作用。

來源

2011-12-01 Drew

我前一段時間遇到了這一點，我發現這一點：

http://abcoder.com/css/css-equal-height-columns/

沒有關於使用jQuery或純CSS的解決方案。它爲我工作，我希望這是你在找什麼。乾杯!

來源

2011-12-01 08:18:45 Vern

鏈接已經死了。因此，爲什麼連接的答案是皺眉。 – gbtimmon

如果設置事業部A的高度，然後你可以事業部B的高度設置爲100％

#divA{height:700px;} 
#divB{height:100%;}

，或者如果你試圖做一個2列的網頁佈局，可以脫去了身上的工作

body{height:100%;} 
#divA{height:auto;} 
#divB{min-height:100%;}

，這裏是一個JavaScript解決方案

<script type="text/javascript"> 
    var h = document.getElementById("divA").offsetHeight; 
    document.getElementById("divB").style.height = h + "px"; 
</script>

來源

2011-12-01 08:36:23

有很多方法可以做這樣的事情，這就是所謂的「Faux Column s「。

有descried上sitepoint的方式，有a few more ways，而且也使用Nettuts

描述CSS3漸變的方式BTW，所有的這些方法只使用CSS，沒有JavaScript

來源

2011-12-01 08:38:19

該鏈接指向谷歌搜索虛假列，我認爲一些更具體的代碼會更好，而不是鳥飼養等。 – Peege151

你是對的，@ Peege151。另一方面，現在這個整體的答案並沒有那麼重要，因爲''flex''，'flex'很容易解決問題， –

使得浮動的div填補垂直空間時空間動態

回答

相關問題