Question

我已经在一个固定的容器内，我试图插入一个全宽的parallex。

问题：我无法将其作为容器内部的全宽。视差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>

此外，这也限制在容器内。

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

enter image description here

我现在唯一的解决方案是通过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

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

我无法移动整个DOM结构，因为我有一个浮动的粘性侧边栏，我需要考虑这个问题，它根据右侧边栏相对于页面顶部/底部的偏移量来计算其在页面上的位置

我想出了一个替代解决方案，如果您具有类似的结构，该解决方案应该会有所帮助：

<div class="bg-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8">
        <div class="row">
          <div class="col-12">
            <div class="full-width">
              <nav class="nav">
                [..z-index above pseudo element]
              </nav>
              [...bg light]
            </div>
          </div>
          <div class="col-12">
            <div class="full-width">
              [...make full width with white bg via pseudo element]
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-8">
        [...sticky sidebar]
      </div>
    </div>
  </div>
</div>

SCSS

.full-width {
  position: relative;

  .nav {
    position: relative;
    z-index: 1;
  }

  &:after {
    content: '';
    background-color: white;
    position: absolute;
    left: -999em;
    right: -999em;
    top: 0;
    bottom: 0;
  }
}

在bootstrap容器内创建全宽div

2 个答案: