유체 사이트의 고정 컨테이너에있는 유체 컨테이너

Question

SUSY에서 특정 레이아웃을 얻으려고하고 있지만 다소 어려움이 있습니다.

기본적으로 머리말이나 꼬리말의 경우 유체 전체 너비가 필요한 사이트를 원한다면 주 콘텐츠는 특정 너비로 ​​제한되는 컨테이너에 있어야하지만 전체 너비를 가질 수도 있어야합니다. 정적 컨테이너 내부의 요소 (배경처럼) (정적 컨테이너에서 벗어나지 만 내부 내용은 정적 컨테이너에 계속 정렬 됨).

제한된 1 개의 유체와 2 개의 다른 컨테이너 맵을 사용하여 보관했습니다. 그것은 지금까지 작동합니다.

문제는 유체 너비 요소의 내용을 정적 내용으로 정렬 할 수 없다는 것입니다. 요소를 밀면 잘못된 컨테이너가 오른쪽 컨테이너 맵에 있으면 푸시됩니다. codepen에서 볼 수 있듯이

유체 용기를 정적으로 쌓은 다음 다시 정적으로 되돌려 보려고했습니다 ... 예상대로 작동하지 않았습니다.

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

는 정적 용기 밖으로 소자를 강제 : I 사용하여 해결했다.

내 모든 접근법이 두 개의 컨테이너로 완전히 잘못 되었습니까? 정적 콘테이너와 정렬 된 모든 콘텐트 (텍스트 등)를 가질 수있는 더 좋고 더 쉬운 방법이 있지만 배경 헤더와 유체 요소는 항상 완전히 뻗어 있습니까?

나는 그것은 코드가 복잡하게 보이는, 덕분에 많은 모든

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

Answer 1

1 ... 그것은 말이되지 않습니다 희망? :) 아무것도 comlicated 아마도 좋은 해결책이 아니라 그것을 시도하기위한 명성! (이전에 해왔으므로 지금하고있는 일을 볼 수 있습니다.)

올바른 방향으로 가리 키기 위해, 특히 주 영역에서 두 번째 레벨 요소로 suay를 사용하는 것이 좋습니다. 다음은 가능한 HTML의 예입니다.

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

이렇게하면 오버플로하는 배경에 대해 걱정할 필요가 없습니다. 바깥 쪽 div에 스타일/클래스를 적용하기 만하면됩니다.