三列布局難題，這次沒有頁眉和頁腳

我知道這是那些Web 1.0新手問題之一，但唉，我有能力自己問這個問題。我做的網站不需要這種佈局，現在正在考慮爲一個三列布局，固定寬度的中心列的朋友做一個...與沒有頁眉或頁腳盒元素的扭曲和規定所有三個色譜柱都在高度方向上展開，以適應觀察它們的任何屏幕的大小。三列布局難題，這次沒有頁眉和頁腳

進一步加劇此問題是body將有一個顏色或背景圖像和中心列將有自己的背景顏色或圖像。

在視覺上，頁面佈局會是這樣：

+----------+---------------+----------+ 
|nothing |only content |nothing | 
|here  |will be here |here  | 
|just the |w/a different |just the | 
|body b/g |background  |body b/g | 
|color or |color or  |color or | 
|image  |image   |image  | 
|   |    |   | 
|   |all 3 columns |   | 
|   |always fill |   | 
|   |screen height |   | 
+----------+---------------+----------+

我看過對絕對定位（論壇的Adobe），這顯然與人造列和其他絕對/相對位置發生衝突了一些有趣的論點。理想情況下，我希望使用浮動工具完成所有工作，但我不確定完成此工作的最有效方法。到目前爲止，我還沒有嘗試過任何東西，因爲這只是落在我的腿上。再次，我知道這是基本的，但是當我從具有一種B/G顏色和居中元素的網站來時，我想，'爲什麼這麼難？'

來源

2013-03-13 mileaminute

不知道，如果你打算在中間部分比邊柱更寬的 - 如果你這樣做，你會希望它是超過33.3％更寬。

身高，你想：

html, body { 
     height: 100%; 
    }

然後確保中央DIV是

position: relative; 
    height: 100%; 
    margin: 0 auto;

看到這裏http://jsfiddle.net/mWqwD/

來源

2013-03-13 05:45:14 Rockafella

小提琴這是完美的！只有一個問題......如果我將任何內容放在高於瀏覽器窗口的'.one' div內，導致垂直滾動條出現，我注意到'.one'停在窗口底部，內容繼續向下超越它。 '.one' div並沒有延伸到佔用內容的額外空間。有沒有辦法解決？ – mileaminute 2013-03-13 17:53:57

將高度改爲最小高度應該可以解決這個問題嗎？ http://jsfiddle.net/mWqwD/1/ – Rockafella 2013-03-13 21:17:39

我只是試過它，沒有運氣......仍然有相同的問題，其中div保留了瀏覽器窗口的高度，並且不會向下延伸。 – mileaminute 2013-03-14 19:22:59

設置中間一列的寬度並給它margin: auto。這在塊級元素的兩側應用相等的利潤率。

CSS

#center { 
    width: 33.33%; 
    margin: auto; 
}

來源

2013-03-13 05:20:02 thgaskell

三列布局難題，這次沒有頁眉和頁腳

回答

相關問題