0

我知道这是 Web 1.0 新手问题之一，但是，唉，我可以自己问这个问题。我做的网站不需要这种布局，现在正在考虑为朋友做一个三列布局，固定宽度的中心列......没有页眉或页脚框元素的扭曲和stip所有三列都在高度方面拉伸以适应查看它们的任何屏幕的大小。

进一步加剧这个问题的是，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 颜色和居中元素的网站时，我会想，“为什么这么难？”

4

2 回答 2

0

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

对于身高，你想要：

    html, body {
      height: 100%;
    }

然后确保您的中央 div 是

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

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

于 2013-03-13T05:45:14.190 回答
0

在中心列上设置一个宽度并给出它margin: auto。这会在块级元素的两侧应用相等的边距。

CSS

#center {
    width: 33.33%;
    margin: auto;
}
于 2013-03-13T05:20:02.360 回答