Question

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

我还包括html，正文，因为我不确定问题出在哪里。

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 position:absolute上使用id="triathlete"，那么你的主容器不会占用该元素的空间。您可以尝试的解决方案是：

在你的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;
}

并将容器的height更改为min：
```
#container {
  min-height:100%;
}
```

Demo

Answer 2

如果这不起作用（出于任何原因），或者您觉得实现它会给您带来太多或令人头疼的问题，那么使用jQuery是一个快速而又脏的修复：

setInterval(function() {
    $("#container").css("height",$(document).height());
},50);

这会自动调整容器div的大小，以包含所有内容，即使它们位于绝对位置。

再次注意，这不是解决此类问题的正确方法，但如果您没有时间以正确的方式做到这一点，可能对您有帮助。

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

2 个答案: