我已经创建了一个三列背景类型的东西，正如我之前在第一个问题中所描述的：如何使用CSS创建三列网站背景？。无论如何，我让它工作得很成功，就像这样：
我有一个id为centercolumn的div，包含页面的所有内容(页眉、内容、页脚等)：
<html>
<body>
<div id="centercolumn">
<!-- content -->
</div>
</body>
</html>
然后，在CSS中，我有以下设置(仅显示相关代码)：
body {
background-image: url('theimagetobetiledalongthesides.png');
}
#centercolumn {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
width: 760px;
background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png');
}
从本质上讲，正文提供了整个页面的背景，然后中心列div位于其顶部，并一直延伸到页面下方，并具有不同的背景图像。这样看起来有三个列：一个在中间用于内容，两个在侧面。
我相信我遇到的问题是centercolumndiv的overflow属性。在我测试过的任何浏览器(Chrome、Firefox、IE、Opera和Safari)上，中心列最初一直到页面底部(应该是这样)。当我垂直调整页面大小，使其变小/变短时，一旦我到达实际内容(即文本)，页面/浏览器的一侧就会出现滚动条(就像通常一样)。然而，当我向下滚动查看其余内容时，就好像中心列div并没有一直向下：中心列的不同背景图像在向下滚动的部分停止(正好是我向下滚动之前浏览器底部的位置)。我的文本从中心列的背景图像中溢出，然后流到正文的背景图像上。
当我将中心列div上的溢出设置为scroll并开始调整页面大小时，它工作得很好(div似乎一直向下——中心列背景图像没有被截断)，但它会产生一种相当丑陋的效果，滚动条实际上出现在中间内容列的一侧，而不是浏览器的一侧。
我该怎么做才能让中间内容列的不同背景图像一直向下，而不会在垂直调整浏览器窗口大小时在中间列的一侧出现滚动条？
edit:JSFiddle示例http://jsfiddle.net/dDfkC/1/.
您使用的是position:absolute，这是错误的，您希望使用相对定位，然后margin:0 auto；以使该列居中。
你需要做的是设置
#centercolumn {
position:relative;
margin: 0 auto;
width:760px;
background-image: url(whatever);
background-repeat: both;
}
如果你想把它扩展到页面底部，不管你的内容有多少：
body, html {
height:100%;
}
并添加到以上
#centercolumn {
min-height: 100%;
}
和一个真正的基本CSS重置：
* {
margin:0;
padding:0;
}
你可以试试这样的东西：
#centercolumn {
position: absolute;
top: 0;
min-height:100%;
margin: auto;
width: 760px;
background-repeat: repeat-x;
background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png');
}
最好看看你所拥有的以及你想要实现的确切例子
您可以对左列和右列使用固定定位，对主列使用静态定位，如这个jsfiddle