流体サイトの静的コンテナ内の流体容器

Question

SUSYで特定のレイアウトを達成しようとしていますが、ちょっと苦労しています。

ヘッダーやフッターの場合、基本的にフルイド幅のサイトを作成したいのですが、メインのコンテンツは特定の幅に制限されたコンテナ内にある必要がありますが、フル幅静的コンテナ内の要素（背景など）（静的コンテナから抜け出すが、内部コンテナは静的コンテナにアライメントされている）

2つの異なる容器マップを使用してアーカイブしました.1つは制限付き、1つは液体です。それは今まで働いています。

問題は、流動幅の要素の内容を静的な内容に揃えることができないということです。要素を押した場合、正しいコンテナ内にある場合は間違ったコンテナがプッシュされます。あなたがcodepenで見ることができるように。

私は静的に液体容器を積み重ねて静かにして静かに戻してみようとしましたが、どういうことが期待どおりに機能しませんでした。

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

はその静的な容器の外の要素を強制的に： 私が使用して回避策を作りました。

2つの容器を使った私のアプローチは完全に間違っていますか？静的コンテナに整列されたすべてのコンテンツ（テキストなど）を持つ方がはるかに優れた、より簡単な方法ですが、背景ヘッダーと流体要素は常に完全に伸びていますか？

は、私はそれは、あなたのコードが複雑に見えますが、おかげでたくさんのすべての

http://codepen.io/HendrikEng/pen/qrqdaP?editors=0100

Answer 1

第一...それは理にかなっていない願っていますか？ :)何かがcomlicatedはおそらく良い解決策ではありませんが、試してみてください！

正しい方向に向けるには、特にメインエリア内で第2レベルの要素としてsuayを使用することを検討してください。可能なHTMLの例を次に示します。

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

この方法で、オーバーフローする背景について心配する必要はありません。外側のdivにスタイル/クラスを適用するだけで良いです！