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/

三栏布局难题，这次没有页眉和页脚

2 个答案: