html - 列 BG 图像不会扩展到 100% 高度

Question

我有一个带有背景图像的左列和另一个主体背景图像，因此它填充了屏幕的其余部分。我在左列的右侧有内容区域，它将垂直延伸到浏览器窗口之外。将左列设置为 100% 高度后，一旦我向下滚动，左列的背景图像将不会超出屏幕的原始大小。是否有纯 css 方式让左栏超出浏览器窗口的原始高度，以匹配内容区域？

http://ophilium.com/test/test.html

html {
    height: 100%;
}
body {
    height: 100%;
    background-image: url(../images/rightPanel.png);
    background-repeat: repeat;
    height: 100%;
}

#left {
    background-repeat: repeat-y;
    width: 207px;
    padding: 10px;
    float: left;
    height: 100%;
    background-image: url(../images/leftPanel.png);
}
#right {
    height: 500px;
    padding: 10px;
    min-width: 773px;
    float: left;
}
#container {
    position: relative;
    min-width: 1100px;
    height: 100%;
    background-repeat: repeat;
}

Answer 1

将规则 background-attachment: fixed; 添加到您的 body 元素。