0

我有一个带有背景图像的左列和另一个用于主体的背景图像，因此它填充了屏幕的其余部分。我在左列右侧有一个内容区域，它将垂直延伸到浏览器窗口之外。将左列设置为 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;
}
4

4 回答 4

0

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

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

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

于 2012-04-28T20:44:33.773 回答
0

如果我正确理解您的问题，您需要使用该equal height columns技术。谷歌搜索解决方案把我带到这里和这里。在那里，您可能会找到使侧边栏与主要内容区域相同的不同方法。只需选择最好的一个:)

于 2012-04-28T20:49:03.433 回答
0

当您将 html 和 body 标记高度设置为 100% 时，它们都将它们的高度设置为浏览器窗口的内部高度，这意味着它们具有相同的值和固定值。并且由于您的 div #container 和 #left 是 body 元素的子元素并且相对于 body 元素，因此它们相应地设置了 100% 的高度，即内部高度。

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

于 2012-04-28T21:01:06.033 回答
0

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

于 2012-04-28T20:20:45.660 回答