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

Question

我知道這是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顏色和居中元素的網站時，我想到：“為什么這么難？”

Answer 1

在中心列上設置寬度並為其設置margin: auto 。 這在塊級元素的兩邊都應用了相等的邊距。

的CSS

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

Answer 2

不知道您是否打算將中間部分寬於側邊欄-如果您願意，則希望中間部分寬於33.3％。

對於高度，您需要：

    html, body {
      height: 100%;
    }

然后確保您的中央div是

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

在這里查看小提琴http://jsfiddle.net/mWqwD/