流体容器位于流体现场的静态容器中

Question

i am trying to achieve a specific layout in SUSY but i am kinda struggling.

I want to have a site that is basically fluid full width when it comes to header or footer, the main content should be in a container that is restricted to a specific width, but it should be also possible to have full width elements( like backgrounds) within the static container ( they would break out of their static container but having their inner content still aligned to the static container ).

I archived it using 2 different container maps, one restricted and one fluid. that works so far.

The Problem i run into is that i cant align the content of the fluid width element to the static content, if push the element, the wrong container will be pushed if its in the right container map. as u can see in the codepen.

I tried to work it out with stacking the fluid container in the static and then back to static...what kinda didn't work as expected. I made a workaround using :

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

to force the element out of its static container.

Is my whole approach with two containers completely wrong? Is there a much better and easier way to have all the content (text etc) aligned with the static container but the background header and fluid element always fully stretched?

I hope it makes sense...thanks a lot

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

Answer 1

1st of all, your code looks complicated, doesn't it? :) anything comlicated probably isn't a good solution, but kudos for trying it out! (I can see what you're doing, since I've done it before)

To point you in the right direction, consider using suay as a second level element, especially within your main area. Here's an example of the possible HTML:

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

This way, you don't have to worry about overflowing background. Just apply a style/class to the outer div and you're good to go!