整个页面的父元素是一个居中的div，最大宽度限制为960px.页面上的所有其他元素都是该父div的子级.简化后的 struct 如下:
<div id="parent">
<div id="something"></div>
<div id="wide-div"></div>
<div id="something-else"></div>
</div>
虽然父div不应该扩展超过960px的宽度，但我在这里称为"wide div"的div应该填充整个屏幕的宽度.它包含一幅比960px宽的图像，并且应该为整个屏幕宽度设置不同的背景色.
我不能轻易地将该div从父div中删除，这会扰乱我布局的其他部分，并且会使整个事情变得相当尴尬.
我发现了一些关于如何实现这一点的诀窍，但似乎没有一个符合我的要求.我的设计是响应性的，或者至少我在努力做到这一点.我发现的技巧依赖于知道涉及的元素的大小，这在我的例子中是不固定的.
有没有办法将内部div扩展到响应性布局中的全屏宽度？
可以基于VW(视口宽度)设置宽度.您也可以通过使用calc函数使用该值来计算div的左边距.这样，您可以将其定位在流内部，但仍然突出在居中的固定宽度div的左侧和右侧.
支持很好.vw等于supported by all major browsers, including IE9+.calc()也一样.如果您需要支持IE8或Opera Mini，那么使用这种方法就不走运了.
-编辑-
正如 comments 中提到的，当页面内容高于屏幕时，这将导致水平滚动条.您可以使用body {overflow-x: hidden;}取消该滚动条.虽然以不同的方式解决问题会很好，但是使用left和right的解决方案(就像在Width:100% without scrollbars中介绍的那样)在这种情况下是不起作用的.
-编辑2021-
滚动条的另一个解决方案，可能是可接受的，也可能不是，这取决于您的情况:
#wide-div {
width: calc(100vw - 20px);
margin-left: calc(-50vw + 50% + 10px);
div {
min-height: 40px;
box-sizing: border-box;
}
#container {
position: relative;
}
#parent {
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
#something {
border: 2px solid red;
}
#wide-div {
width: calc(100vw - 20px);
margin-left: calc(-50vw + 50% + 10px);
border: 2px solid green;
}<div id="container">
<div id="parent">
<div id="something">Red</div>
<div id="wide-div">Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
<div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>