CSS相对背景未在插入html代码时扩展

Question

感谢您的帮助，您可以为我提供/将我指向写信方向。

我不确定如何解释发生了什么。

我当前有一个带有图像背景的页面（图像为4044,2160，因此它比您在单个屏幕上（通常）所看到的要大）。

当前，在页面加载时，图像居于顶部居中，不再重复，因此完全填充了背景。

但是，当通过javascript等插入html代码（CRUD）时，结果页面在y方向上变得大于原始页面，背景会停止并且不会填充下面的空间。

http://postimg.org/image/jqzx0vuzr/

我不确定该怎么做才能修复它，并且很可能认为这是一个CSS问题。

下面是代码：HTML

<section id="index" class="index clinic">
    <div id="x_container">
        Javascript insertion of code
    </div>
</section>

的CSS

.clinic{
    width:100%;
    position:relative;
    background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
    height: 100%;
    padding: 0;
}

#index.index {
    padding:15% 0 0 0;
}
#xcrud_container{
    width: 90%;
    margin: 0 auto;
}

看来javascript对插入的内容无关紧要（尝试过lorem ipsum等），但是只是为了扩展所插入的内容，x_container的大小会根据状态而变化，而javascript会对此进行更改。 （因此不会重新加载页面，并且不会重新计算背景尺寸）

我目前已经尝试过clearfix解决方案（但无济于事），并且尝试在背景图片上重复-y。

最后，我尝试通过直接将html代码（即没有插入任何内容，并且与页面的html代码分开）直接保存到页面中，并尝试查看背景是否扩展，来手动创建页面。 它不是。 背景填充了初始视图区域，但是，当您向下滚动页面时，白色区域会再次出现。

只是要确保知道背景图像大于查看的区域，因此不应出现白色区域。

任何帮助将不胜感激，因为我已经在此工作了几天。

谢谢

Answer 1

例如，将％更改为Pixels。

.index{
    height:1000px;
    padding: 0;
}

Answer 2

谢谢你们的帮助

通过评论和答案，我能够弄清自己的愚蠢之处，试图强迫标签定义页面背景而不是使用正文。 即。

之所以将其定义为section标签，是因为它在以前的页面上使用，在上接有另一个section，因此空白区域不会成为问题。 （也是对height：100％的原因；因为我必须将段的高度定义为100％才能在段内完全创建图像。

再次感谢。