流體容器在流體網站上的靜態容器

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，您就可以輕鬆前往！