css - 容器 DIV 背景图像不随内容扩展

Question

我的容器 div 有问题，您将在下面看到。它包含一个垂直重复的非常简单的图形。我希望背景图片随内容一起扩展，但它并没有这样做。当我展开浏览器窗口时，背景图像会展开以垂直填充页面，因为它应该......但是当我滚动时，最初位于折叠下方的背景下部在我向下滚动时是空的。

我还包含了 html,body，因为我不确定问题出在哪里。

CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH

谢谢!!!

html,body {
    background-color: #999;
    background-image: url(../images/bg.jpg);
    background-position: top;
    background-repeat: repeat;
    color: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 18px;
    margin: 0;
    padding: 0;
}

#container {
    background-color: #000;
    background-image: url(../images/bg_container.gif);
    background-position: left top;
    background-repeat: repeat-y;
    display: block;
    height: 100%;
    margin: 0 auto; 
    max-width: 1200px;
    min-width: 860px;
    padding: 0 3px 0 3px;
    position: relative;
}

Answer 1

这里的问题是你在 div id="triathlete" 上使用 position:absolute 然后你的主容器不考虑那个元素的空间.您可以尝试的解决方案是:

• 在您的 html 中更改两个元素之间的顺序，您有:

  <div id="triathlete"></div>
  <div id="mainBody"></div>
  

  像这样更改这些元素:

  <div id="mainBody"></div>
  <div id="triathlete"></div>
  

• 然后删除 position:absolute :

  #triathlete {
    background-image: url(../images/image_triathlete.png);
    background-position: top;
    background-repeat: no-repeat;
    display: block;
    left: 3px;
    margin: 0;
    padding: 87px 30px 0 30px;
    /*position: absolute; Remove this
    top: 363px;*/
    width: 150px;
    z-index: 3;
  }
  

• 并将容器的高度更改为min:

  #container {
    min-height:100%;
  }
  

Demo