CSS背景重复问题

Question

我有一张背景图片，我想沿着左边距扩展页面的长度。

这是我的CSS...

body, html{
    height:100%;
}
#content{
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
    height:100%;   
}

结果很好:

直到我页面中的内容超过页面折叠线，此时如果我向下滚动，我会得到这个:

所有内容都在一个 id 为“content”的 div 中。

想法？

Answer 1

您的 #content 元素的高度为 100%，因此折叠下方的任何内容都不会在其中，但会溢出。您可以改用 min-height 来解决这个问题。

#content {
    min-height: 100%;   
}

请记住，并非所有浏览器都支持 min-height。特别是，这在 IE6 及以下版本中不起作用。您可以使用条件注释为 IE6 应用不同的样式，像以前一样设置 height 属性，由于其呈现中的一个怪癖，它实际上应该按您预期的方式运行。