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

【问题标题】：Fluid container in a static container on a fluid site流体站点上的静态容器中的流体容器
【发布时间】：2017-07-27 15:09:48
【问题描述】：

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

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

我使用 2 个不同的容器地图存档了它，一张是受限地图，一张是流动地图。到目前为止有效。

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

我试图通过将流体容器堆叠在静态中然后再返回到静态来解决这个问题……有点不像预期的那样工作。我做了一个解决方法：

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

强制元素离开它的静态容器。

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

我希望这是有道理的......非常感谢

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：