Question

右侧栏中的背景图片存在问题。当主要内容区域的高度发生变化时，我希望它能够垂直重复。

任何帮助将不胜感激

这是我的CSS

 #rightcol {
        background: #86030b url(images/leftcol-bg.jpg) top repeat-y;
        height:100% !important;
        text-align: center;
        float: right;
        width: 210px;
        padding: 20px auto;
      }

Here is some more of my CSS

    #content-wrapper {
width: 930px;
height: 100%;
margin: 10px auto;
}

#content_main {
height: 100%;
padding: 14px;
top: 0px;
background: #fff;
width: 692px;
float: left;
margin-bottom: 0px;
}

#rightcol {
background: #86030b url(images/leftcol-bg.jpg) top repeat-y;
height:100% !important;
text-align: center;
float: right;
width: 210px;
padding: 0px auto;
  }

感谢您迄今为止的所有帮助

Answer 1

所有父元素（包括body标签）都需要设置100％的高度，以使“rightcol”填充页面的整个高度。

这是一个可能有助于http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

的轻松阅读

Answer 2

试试这个：

#rightcol {
    background-image:url('images/leftcol-bg.jpg');
    background-repeat:repeat-y;
    height:100% !important;
    text-align: center;
    float: right;
    width: 210px;
    padding: 20px auto;
  }

Answer 3

您需要将主要内容和右列放在包含两者的div中，并将背景放在该div上。

背景图像不重复列

3 个答案: