将100％宽度的div放入WordPress的页面内容容器中

Question

I guess this question equally applies to CSS and WordPress. I'm using Bootstrap but it's not necessarily relevant to the issue.

I have a design that calls for a full width section (a full width image with text) in the middle of a WordPress page. This diagram basically outlines the layout:

http://postimg.org/image/xls5kg9yf/

The header and footer in gray are full width. The page content (in yellow) sits within a Boostrap container, with a max-width of 1170px. The red section represents the full width div with an image and text which need to be inserted in the middle of the page content.

What is the best way to make this happen? The page's content has to sit inside of a container class for obvious reasons. The client wants the full width section to sit in the middle of the page's content, as the text above and below it needs to be editable via the dashboard. So I can't just edit the page template and put the full width image after the container which encloses the page content.

position: absolute; won't work, because the image needs to remain within the flow of the page. Additionally, Boostrap columns use position: relative so it would just position itself relative to the parent column, which sits inside a container, and therefore wouldn't be 100% width.

I could use margin-left: -9999px & margin-right: -9999px (or whatever number) to make it 100% width, but if those margins aren't exactly equal to window width - container width then the background image is going to stretch well past 100%.

The only possible solution I can think of is to use jQuery to get the window width, then set the section's width to the same as the window, with a negative left margin equal to (window width - container width)/2.

So for example, if the window was 1400px wide and the container 1170px then the full width section would be set using a script to:

.full-width-section {
  width: 1400px;
  margin-left: -115px;
}

Of course the script would need to run when the window is resized as well. Overall this seems like a very convoluted solution. Any simple solution using just CSS would be amazing.

Here's the relevant CSS and HTML for reference:

HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      [page content, <?php the_content(); ?> is here on the page template]
      <div class="full-width-section"></div>
      [more page content]
    </div>
  </div>

CSS:

.container {
    width: 1170px;
}

.col-xs-12 {
    width: 100%;
    position: relative;
}

Answer 1

Jquery might be the solution. How does it go with margin-left:-100%;?

Else you might be able to close the .container class, sett your slider image thingy and then start the .container again... so you can calcualte from full window with with the slider.

Answer 2

I ended up just closing the divs before the full width section, and then opening them again afterwards. I'm actually using a shortcode for the section so I just added the HTML to close and then re-open the tags to the shortcode's output.

It certainly doesn't seem like best practice, but between that or a complicated jQuery alternative it was the easier way to go.

Answer 3

If you don't need to support IE8, there's an alternative solution. This does not involve any modification on the markup, using absolute positionning or jQuery.

Instead, you can use the css calc() function and viewport units to apply the right negative margin and padding.

I made an example @ http://codepen.io/manuszep/pen/pvqqwp/

The negative left margin is calculated like so :

margin-left: calc(((-100vw + 960px) / 2) - 20px);

where 960px is the width of the page and 20px is the padding of the containers

To center again the content to the size of the wrapper, you can reapply a padding:

padding-right: calc(((100vw - 960px) / 2) + 20px);
padding-left: calc(((100vw - 960px) / 2) + 20px);

That way, your div background is 100% width of the viewport but it's content is exactly as wide as your container.

I tried this with a container width set in % but it did not work correctly.