使引导容器内的整个宽度为div

Question

我已经在一个with容器中，我正在尝试插入一个全角的视差。

问题：我无法将其全宽放置在容器中。视差div是来自后端的静态块。 [所以 当我尝试关闭静态容器内的容器时，它会自动 删除未配对的结束div]

我尝试过将它放置在绝对位置，并用相对位置的div包裹它：

<div class="container">
    <div class="parallax-wrapper">          //position: relative;
        <div class="parallax-container">    //position: absolute;
           //parallax div and content here
        </div>
    </div>
</div>

而且这也仅限于容器内。

视觉上，在下面，我需要用绿线表示全角的视差。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9VdzU1Yy5wbmcifQ==” alt =“在此处输入图像描述”>

我现在唯一的解决方案是通过jquery，首先获取文档宽度。并通过减去它形成当前容器的宽度并增加剩余的宽度并使其固定为宽度，并使它的管理余量溢出到负数。而且我认为这不是一个好习惯

Answer 1

您可以实现用css描述的jquery解决方案，但适用于IE9 +。

.parallax-container{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.parallax-container:before,
.parallax-container:after {
    display: table;
    content: " ";
}

.parallax-container:after {
    clear: both;
}

您可以阅读有关vw here和有关calc（）here的信息>

Answer 2

我有类似的方法，但是我需要一个可以扩展容器+列内部的全宽度的元素。