流体站点上静态容器中的流体容器

Question

我正在尝试在 SUSY 中实现特定的布局，但我有点挣扎。

我想要一个在 header 或页脚方面基本上是全宽的网站，主要内容应该在一个限制为特定宽度的容器中，但它也应该是可能在静态容器中包含全宽元素（如背景）（它们会脱离静态容器但其内部内容仍与静态容器对齐）。

我使用 2 种不同的容器贴图将其存档，一种是限制性的，一种是流体性的。到目前为止有效。

我运行遇到的问题是我无法将可变宽度元素的内容与静态内容对齐，如果推送该元素，如果它位于正确的容器映射中，则会推送错误的容器。正如你在代码笔中看到的那样。

我试图通过将流体容器堆叠在静态中然后返回到静态来解决这个问题......有点没有按预期工作。我使用 :

做了一个解决方法

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

强制元素脱离其静态容器。

我用两个容器的整个方法是完全错误的吗？有没有更好更简单的方法让所有内容（文本等）与静态容器对齐，但背景 header 和流体元素始终完全拉伸？

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

Answer 1

首先，您的代码看起来很复杂，不是吗？ :) 任何复杂的事情都可能不是一个好的解决方案，但是尝试一下的荣誉！（我可以看到你在做什么，因为我以前做过）

为了给您指明正确的方向，请考虑将 suay 用作二级元素，尤其是在您的主要区域内。这是可能的 HTML 的示例：

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

这样就不用担心背景溢出了。只需将 style/class 应用到外部 div 即可！

Fluid container in a static container on a fluid site