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元素。

Answer 2

请查看演示http://jsfiddle.net/n9Tcv/

var right_height = jQuery('#right').height();
var left_height = jQuery('#left').height();
jQuery('#left').height(right_height);

你知道如何使用jQuery吗？如果您有任何疑问只需回复我，我会像这种情况一样执行此代码

Answer 3

如果我正确理解您的问题，您需要使用equal height columns技术。谷歌搜索解决方案带来了here和here。在那里，您可以找到使侧边栏等于主要内容区域的不同方法。只需选择最好的一个：）

Answer 4

当您将html和body标签高度设置为100％时，它们都将其高度设置为浏览器窗口的内部高度，这意味着它们具有相同的值以及固定的值。因为你的div，＃container和#left是身体元素的孩子，所以他们相应地设定了100％的高度，即内部高度。

此外，如果你需要一个问题的答案：那为什么div #right扩展？，这是因为它没有扩展但溢出。并且由于您没有告诉正文或#container或#right将overflow属性设置为隐藏，因此它们都不会阻止此类浏览器行为。在这种情况下，您假设原始窗口高度是溢出导致的高度。

BG列图像不会延伸到100％高度

4 个答案: