Html div溢出？

我已经创建了一个三列背景类型的东西，正如我之前在第一个问题中所描述的：。不管怎么说，我的工作非常成功，就像这样：

我有一个id为centercolumn的div，包含我页面的所有内容（页眉、内容、页脚等）：

从本质上说，主体为整个页面提供背景，然后centercolumn div位于其上并一直向下延伸到页面，并且具有不同的背景图像。这给出了三个列的外观：一个是中间的内容，两个是边。

我相信我遇到的问题是centercolumn div的

overflow

属性。在我测试过的任何浏览器（Chrome、Firefox、IE、Opera和Safari）上，中心列最初都会一直排到页面底部（这是应该的）。当我垂直调整页面大小，使其变小/变短时，一旦我到达实际内容（即文本），页面/浏览器的侧面就会出现一个滚动条（通常会出现）。但是，当我向下滚动查看其余内容时，就好像centercolumn div没有一直向下：centercolumn的不同背景图像在向下滚动的一段时间内停止（正好是我向下滚动之前浏览器底部的位置）。“我的文字”将从centercolumn背景图像中消失，并转到正文的背景图像中

当我将centercolumn div上的溢出设置为

滚动

并开始调整页面大小时，它工作正常（div似乎一直向下-centercolumn背景图像没有被切断），但它会产生一种相当丑陋的效果，滚动条实际上出现在中间内容列的一侧，而不是浏览器的一侧

当我垂直调整浏览器窗口的大小时，如何使中间内容列的不同背景图像一直向下移动，而不会在中间列的侧面显示滚动条

---

编辑：JSFiddle示例位于。

您可以尝试以下方法：

#centercolumn {
    position: absolute;
    top: 0;
    min-height:100%;

    margin: auto;

    width: 760px;
    background-repeat: repeat-x;
    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png');
}

---

最好看一个例子，说明你所拥有的以及你想要实现的目标

你使用的是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;
}

---

您可以对左右列使用固定定位，对主列使用静态定位，如下所示

您可以展示代码的工作示例吗？也许在@Ibu上，好的，我有一个例子。我是用颜色而不是图像来实现的，但效果是一样的（如果你垂直调整浏览器窗口的大小，使其变小，当你向下滚动JSFIDLE上的结果面板时就会看到）。我是用颜色而不是图像来做的，但效果是一样的。这也不是背景图像重复的问题，我的图像会自动垂直和水平重复（这就是我想要的，垂直或水平都不能正确平铺）。在JSFIDLE中，您可以看到我的基本想法：一个包含内容的中间栏，两个具有不同背景设计的侧栏。这几乎可以完美地工作，但现在中间栏不会一直延伸到页面顶部，它会在顶部之前停止。我该怎么做才能让它在页面上下移动呢？CSS重置，你看到的是浏览器默认的边距和填充。。。所以把这个添加到css的开头：{margin:0；padding:0；}除非他根本没有那个标记；随着内容的增长和向容器中添加其他元素，这也会导致其自身的问题。@Patrick JC除了我添加的左栏和右栏之外，其他标记都是相同的；这些列在第一段中已链接到。另外，这种方法会产生什么问题？您添加了两个新的div和大量的css来修复一个问题，这个问题可以通过使用较少的css而不添加任何html标记来解决。同样，假设他用内容填充这个中心列（可能是他计划这样做的一个很好的赌注），给包装器一个静态位置可能会导致浮动问题和解决定位问题。同样，根据侧栏的背景图像，不自然滚动可能会使其看起来很有趣并导致问题等。当您的解决方案工作时，它引入了其他问题的可能性，并且他添加了许多额外的代码（实际上是这样）。@PatrickJC如果您认为我的解决方案仍然有效的话。我只是想通过展示该问题如何与他/她在另一个问题中描述的内容相结合来帮助提出该问题的人。

#centercolumn {
    min-height: 100%;
}

* {
    margin:0;
    padding:0;
}