Question

我已经创建了一个三列背景类型的东西，正如我之前在第一个问题中描述的那样：How to create a three-column website background using CSS?。无论如何，我的工作大多是这样成功的：

我有一个id为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位于其上方并一直向下延伸到页面，并具有不同的背景图像。这给出了具有三列的外观：一个在中间用于内容，两个在两侧。

我相信我遇到的问题是使用centercolumn div的overflow属性。在我测试的任何浏览器（Chrome，Firefox，IE，Opera和Safari）上，中间列最初一直到页面底部（应该如此）。当我垂直调整页面大小，使其变小或变短时，一旦我到达实际内容（即文本），页面/浏览器侧面就会出现一个滚动条（正常情况下）。然而，当我向下滚动以查看其余内容时，就好像中心列div不会一直向下：中心列的不同背景图像在一定程度上停止（确切地说是浏览器底部之前的位置）我向后滚动了一下）。我的文字用完了中心柱背景图像，然后是身体的背景图像。

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

我可以做些什么来让中间内容列的不同背景图像一直向下，而不会导致滚动条出现在中间列的一侧，因为我会垂直调整浏览器窗口的大小？

编辑： http://jsfiddle.net/dDfkC/1/上的JSFiddle示例。

Answer 1

您可以尝试这样的事情：

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

    margin: auto;

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

看到你所拥有的一个例子以及你想要实现的目标可能会更好

Answer 2

你正在使用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;
}

Answer 3

您可以对左列和右列使用固定定位，为主列使用静态定位，如此jsfiddle

div上溢出？

3 个答案: