javascript - 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 代码的一部分)保存到页面并尝试查看背景是否展开来手动创建页面。它不是。背景填满了初始 View 区域，但是一旦您向下滚动页面，白色区域就会重新出现。

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

任何帮助将不胜感激，因为我已经在这几天了......

谢谢

Answer 1

例如，将 % 更改为像素。

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