流体位置上静态容器中的流体容器

Question

我试图在苏西（Susy）实现特定的布局，但我有点挣扎。

我想拥有一个基本上是流体宽度的站点，当涉及标题或页脚时，主要内容应在一个容器中，该容器仅限于特定宽度，但也应该有可能具有完整的宽度元素（如背景）在静态容器中（它们会脱离静态容器，但内部内容仍然与静态容器保持一致）。

我使用2个不同的容器图，一个受限和一个流体对其进行存档。到目前为止工作。

我遇到的问题是，我不能将流体宽度元件的内容与静态内容相结合，如果按下元素，如果在正确的容器映射中，将将错误的容器推开。正如您在Codepen中可以看到的。

我试图通过将液体容器堆叠在静态中，然后返回静态……什么样的人无法正常工作。我使用以下方法进行了解决：

.o-fullwidth {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

将元素从其静态容器中迫使。

我使用两个容器完全错误的整个方法？是否有一种更好，更轻松的方法使所有内容（文本等）与静态容器保持一致，但是背景标头和流体元件总是完全拉伸？

我希望这有意义...非常感谢

http://codepen.io/hendrikeng/pen/qrqdap?editors=0100

Answer 1

第一，您的代码看起来很复杂，不是吗？:)任何复杂的东西可能不是一个好的解决方案，而是尝试尝试的荣誉！（我可以看到您在做什么，因为我以前做过）

要指向正确的方向，请考虑使用SUAY作为第二级元素，尤其是在您的主要区域内。这是可能的html的一个示例：

<div class="full-width-bg"> 
    <div class="static-wrap"> 
        <!-- other elements in here --> 
    </div> 
</div> 

这样，您不必担心背景溢出。只需将样式/类应用于外部div即可，就可以了！