流體容器位於流體現場的靜態容器中

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，就可以了！