如果容器div更小，如何将子div扩展到100%的屏幕宽度?

The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:

整个页面的父元素是一个居中的div，最大宽度为960px。页面上的所有其他元素都是父div的子元素。简化结构如下:

<div id="parent">
  <div id="something"></div>
  <div id="wide-div></div>
  <div id="something-else></div>
</div>

While the parent div shouldn't expand beyond a width of 960px, the div I called "wide-div" here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen.

当父div不应该扩展到960px的宽度时，我称之为“宽div”的div应该填充屏幕的整个宽度。它包含一个比960px宽的图像，并且应该为整个屏幕宽度设置不同的背景颜色。

I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward.

我不能轻易地把div从父div中去掉，它会打乱我布局的其他部分，这会让整个事情变得很尴尬。

I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case.

我发现了一些关于如何实现这一点的技巧，但似乎没有一个符合我的要求。我的设计是响应性的，或者至少我正在努力实现它。我发现的技巧依赖于知道所涉及的元素的大小，这在我的例子中是不固定的。

Is there a way to expand the inner div to the full screen width in a responsive layout?

是否有办法将内部div扩展到响应式布局的全屏宽度?

5 个解决方案

#1

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

您可以根据vw (viewport width)设置宽度。您也可以使用calc函数使用该值来计算div的左距。这样您就可以将它放置在流中，但仍然突出显示在居中的固定宽度div的左侧和右侧。

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

支持很好。大众支持所有主流浏览器，包括IE9+。calc()也是如此。如果你需要支持IE8或Opera Mini，你就不适合使用这种方法了。

-edit-

编辑- - - - - -

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

如注释中所提到的，当页面的内容高于屏幕时，将导致水平滚动条。您可以使用body {overflow-x: hidden;}来抑制该滚动条。虽然用另一种方法来解决这个问题是很好的，但是用左右两种方法来解决这个问题是很好的:在这种情况下，没有滚动条的100%是无效的。

div {
  min-height: 40px;
  box-sizing: border-box;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}

<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>

#2

After much research, I found this solution: Creating full width (100% ) container inside fixed width container. I think that it is the best solution because it does not depend on any external factor, only the div that you want to expand.

经过大量的研究，我发现了这个解决方案:在固定宽度的容器中创建全宽度(100%)容器。我认为这是最好的解决方案，因为它不依赖于任何外部因素，只依赖于要展开的div。

<div class="container" style="width: 750px; margin: 0 auto;">
   <div class="row-full">
     --- Full width container ---
   </div>   
</div>

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

#3

Typically the responsive element, bootstrap or Foundation, allow you to add a "row" element. You can put the "wide-div" outside an element with "row" and it should expand to take up the full width.

通常，响应性元素(bootstrap或Foundation)允许您添加“row”元素。您可以将“宽div”放在带有“row”的元素之外，它应该展开以占据整个宽度。

Alternatively, you can use absolute positioning for that element which ignores most inherited settings:

或者，您可以对忽略大多数继承设置的元素使用绝对定位:

.wide-div {
    position: absolute;
    left: 0;
    right: 0;
}

#4

you can use vw. demo http://jsfiddle.net/fsLhm6pk/

您可以使用大众。演示http://jsfiddle.net/fsLhm6pk/

.parent {
    width:200px;
    height:200px; 
    background:red;
}
.child {
    width:100vw;
    height: 50px; 
    background:yellow;
}

you are right, this won't work with centered div, try this instead

你说得对，这对居中div不起作用，试试这个

EDIT http://jsfiddle.net/fsLhm6pk/1/

编辑http://jsfiddle.net/fsLhm6pk/1/

.parent {
width:200px;
height:200px; 
background:red;
margin:0 auto;
}
.child {
width:100%;
left:0; right:0;
position:absolute;
height: 50px; 
background:yellow;
}

#5

You can now do this

你现在可以这么做了

.full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

or this

或者这个

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

More details: https://css-tricks.com/full-width-containers-limited-width-parents/

更多信息:https://css-tricks.com/full-width-containers-limited-width-parents/。

#1