我已经创建了一个三列背景类型的东西，正如我之前在第一个问题中所描述的:How to create a three-column website background using 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');
}
本质上，body 为整个页面提供背景，然后 centercolumn div 位于其之上并一直延伸到页面下方，并具有不同的背景图像。这给出了具有三列的外观:一列在中间用于内容，两列在两侧。
我认为我遇到的问题是 centercolumn div 的 overflow 属性。在我测试过的任何浏览器(Chrome、Firefox、IE、Opera 和 Safari)上，中心栏最初一直到页面底部(应该如此)。当我垂直调整页面大小时，使其更小/更短，一旦我到达实际内容(即文本)，页面/浏览器的一侧就会出现一个滚动条(就像通常那样)。但是，当我向下滚动以查看其余内容时，好像 centercolumn div 并没有一直向下:centercolumn 的不同背景图像停止了一半(正是浏览器底部之前的位置)我向下滚动)。我的文本超出了中心栏的背景图像，并出现在正文的背景图像上。
当我将 centercolumn div 上的溢出设置为 scroll 并开始调整页面大小时，它工作正常(div 似乎一直向下 - centercolumn 背景图像没有剪切关闭)，但它会产生相当丑陋的效果，滚动条实际上出现在中间内容列的一侧，而不是浏览器的一侧。
我该怎么做才能让中间内容栏的不同背景图像一直向下显示，而不会在我垂直调整浏览器窗口大小时导致滚动条出现在中间栏的一侧？
编辑: 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;
}
关于html - div 溢出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12904710/