html - 三列布局难题，这次没有页眉和页脚

Question

我知道这是 Web 1.0 新手问题之一，但遗憾的是，我可以自己问这个问题。我做的网站不需要这种布局，现在正在考虑为 friend 做一个三列布局、固定宽度的中心列……没有页眉或页脚框元素的扭曲和提示所有三列都在高度方向上拉伸(stretch)以适应在其上查看它们的任何屏幕的大小。

进一步加剧此问题的是 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 论坛)，它们显然与人造列和其他绝对/相对定位相冲突。理想情况下，我想用 float 来完成这一切，但我不确定最有效的方法来完成这个。到目前为止，我还没有尝试过任何东西，因为这只是落在了我的腿上。同样，我知道这是基本的，但是当我用一种 B/G 颜色和居中元素制作网站时，我会想，“为什么这这么难？”

Answer 1

不确定您是否打算让中间部分比侧栏更宽 - 如果您这样做，您会希望它比 33.3% 更宽。

对于高度，你想要:

    html, body {
      height: 100%;
    }

然后确保你的中心div是

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

在这里查看 fiddle http://jsfiddle.net/mWqwD/