流体容器在流体网站上的静态容器

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

月1日，你的代码看起来复杂，不是吗？ :)任何事情可能并不是一个好的解决方案，但是可以试用它！ （我可以看到你在做什么，因为我之前做过）

为了指出你正确的方向，考虑使用suay作为二级元素，特别是在你的主要区域。下面是一个可能的HTML示例：

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

这样，您不必担心溢出背景。只需将风格/类应用到外部div，您就可以轻松前往！