Question

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

我想要一个基本上是流量全宽的网站，当涉及页眉或页脚时，主要内容应该在一个限制为特定宽度的容器中，但也应该有一个全宽元素（如背景）静态容器内（它们会突破静态容器，但内部内容仍然与静态容器对齐）。

我使用2个不同的容器贴图存档它，一个限制，一个流体。到目前为止工作。

我遇到的问题是我不能将流体宽度元素的内容与静态内容对齐，如果推送元素，如果在正确的容器图中，将推送错误的容器。你可以在codepen中看到。

我尝试将液体容器堆放在静电中，然后再回到静止状态......这种方法没有按预期工作。我使用了

做了一个解决方法

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

强制元素离开静态容器。

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

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

Answer 1

首先，您的代码看起来很复杂，不是吗？ :)任何复杂的东西可能都不是一个很好的解决方案，但是尝试一下就值得称赞！（我可以看到你正在做什么，因为我之前已经做过了）

要指向正确的方向，请考虑使用suay作为第二级元素，尤其是在您的主要区域内。以下是可能的HTML示例：

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

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