0

我已经创建了一个三栏背景类型的东西，正如我之前在我的第一个问题中描述的那样：如何使用 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 位于其之上并一直延伸到页面下方，并具有不同的背景图像。这给出了具有三列的外观：中间一列用于内容，两列在侧面。

我相信我遇到的问题是overflowcentercolumn div 的属性。在我测试过的任何浏览器（Chrome、Firefox、IE、Opera 和 Safari）上，中心栏最初一直到页面底部（应该如此）。当我垂直调整页面大小，使其更小/更短时，一旦我到达实际内容（即文本），页面/浏览器的侧面就会出现一个滚动条（就像通常那样）。但是，当我向下滚动以查看其余内容时，就好像 centercolumn div 并没有一直向下： centercolumn 的不同背景图像在中途停止（正好是浏览器底部之前的位置我向下滚动）。我的文本用完了 centercolumn 背景图像，并出现在正文的背景图像上。

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

我该怎么做才能让中间内容列的不同背景图像一直向下，而不会在我垂直调整浏览器窗口大小时导致滚动条出现在中间列的一侧？

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

4

3 回答 3

0

你可以尝试这样的事情：

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

    margin: auto;

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

可能会更好地查看您拥有的示例以及您想要实现的目标

于 2012-10-15T22:20:42.597 回答
0

您正在使用 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;
}
于 2012-10-15T22:20:57.617 回答
0

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

于 2012-10-15T22:24:22.907 回答