整个页面的父元素是一个居中的div，限制为960px的最大宽度。页面上的所有其他元素都是该父div的子元素。简化结构如下：
<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，那么这个方法是不幸的。
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"></div> </div>
