如何使用CSS創建此類佈局？

這是一種在邊緣具有固定長度的佈局，但主要內容容器是流體。如何使用CSS創建此類佈局？

我在這裏做了一個jsfiddle http://jsfiddle.net/JyXtR/3/ 我只是無法得到它，我不明白爲什麼。

的主要內容，並在右側的容器的內容應該是相同的高度，無論有多少內容是在其中。

我在這方面真的很糟糕，或者CSS不適合這些類型的佈局，他們在任何時候都佔用整個頁面？

2012-02-12 fent

你的意思是這樣http://jsfiddle.net/22D4F/2/？ – Zeta 2012-02-12 20:04:25

就像那樣，但不完全是這樣。理想情況下，主要內容和側邊欄應該有自己的滾動條，因爲內容高度可以不同。我喜歡你與邊欄邊界的方式。 – fent 2012-02-12 21:52:04

Demo。使用display:inline-block;，並調整兩個對象的寬度。爲了演示目的，我手動將主div的高度設置爲300px。請注意，由於main不會滾動，因此您的內部對象必須使用更少的than height:100%。

也許有可能將高度屬性設置爲display:table-cell元素，但給定的解決方案應該適用於您的情況。

2012-02-12 22:00:13 Zeta

很酷。任何方式使主要的高度是100％減去頁腳高度？或者我將不得不用JavaScript來做到這一點？當#main更大時，爲什麼側欄會粘到#main的底部？ – fent 2012-02-12 22:13:30

我無法重現第二個錯誤，但您可以使用定位調整100％減去頁腳高度。然而，目前的解決方案相當混亂，也許你會找到更好的解決方案（提示：把所有屬於一起的東西放在一起，根據需要使用盡可能小的CSS）;）。 – Zeta 2012-02-12 22:22:34

更新的解決方案效果很好。 :)感謝所有的幫助。今天真的很強調我。 – fent 2012-02-12 22:27:08

立即檢查。但有一個問題，因爲它只能用css解決。如果側邊欄比內容長，則問題是佈局無法正常工作。如果沒有javascript，它就無法解決，因此您必須將內容div的最小高度設置爲邊欄內容高度。 http://jsfiddle.net/DvaWk/

2012-02-12 20:07:39 designerrr

你需要'浮動：離開'你的聊天div並設置在線用戶div爲200px;
編輯：同時添加溢出：自動到#main。

2012-02-12 20:09:05 Rob

這似乎沒有做到這一點。請注意，這兩個div都有'position：absolute'，因爲它們不應該被滾動。只有內容應該滾動。 – fent 2012-02-12 21:52:51

@DeaDEnD - 不在你的jsfiddle中沒有。請注意我上面的編輯。 – Rob 2012-02-12 22:15:50

你是對的，他們有親戚。抱歉，我一直在嘗試使用很多類型的職位，我感到困惑。 – fent 2012-02-12 22:18:51

回答