如果容器div较小，如何将子div扩展到100％屏幕宽度？

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

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

尽管父div的宽度不应超过960px，但我在此处称为“宽div”的div应该会填满屏幕的整个宽度。它包含一个比960px宽的图像，并且应该为整个屏幕宽度设置不同的背景色。

我不能轻易地将该div从父div中移出，它会弄乱我的布局的其他部分，并使整个事情变得很尴尬。

我找到了一些技巧来实现这一目标，但似乎没有一个能满足我的要求。我的设计具有响应能力，或者至少我正在尝试实现这一目标。我发现的技巧依赖于了解所涉及元素的大小，在我的情况下这不是固定的。

有没有办法在响应式布局中将内部div扩展到整个屏幕宽度？

您可以基于vw设置宽度（视口宽度）。您也可以使用calc函数使用该值来计算div的左边界。这样，您可以将其放置在流中，但仍突出在居中固定宽度div的左侧和右侧。

支持非常好。包括IE9 +在内的所有主流浏览器vw均支持该功能。同样的道理calc()。如果您需要支持IE8或Opera Mini，那么使用这种方法就很不走运。

-编辑-

如评论中所述，当页面的内容高于屏幕时，这将导致水平滚动条。您可以使用禁止滚动条body {overflow-x: hidden;}。最好以其他方式解决该问题，但是使用left和right类似Width：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>

经过大量研究，我找到了以下解决方案：在固定宽度容器内创建全宽（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%;
}

通常，响应元素（引导程序或Foundation）允许您添加“行”元素。您可以将“ wide-div”放置在带有“ row”的元素之外，并且应该扩展以占据整个宽度。

另外，您可以对该元素使用绝对定位，而忽略大多数继承的设置：

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

您现在可以执行此操作

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

或这个

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

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

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

.parent {
  width: 200px;
  height: 200px;
  background: red;
}

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

<div class='parent'>
  <div class='child'></div>
</div>

没错，这不适用于centered div。尝试以下方法：

编辑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;
}

<div class='parent'>
  <div class='child'></div>
</div>

令我惊讶的是，过去4年中没有人提供以下产品。cssposition:fixed属性将项目拉出并相对于窗口缩放。在某些情况下，这可能行不通，但是如果您使用模式框或其他方式编写Java脚本，则可以正常工作。

.wide-div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%; // in case you need to cover the height as well
    background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
    z-index:1; // you may need to adjust the index of your other elements as well
}

我的50分钱在这里

尽管我也发现其他人的答案也是正确的，但我认为需要提及一个古老的CSS技巧来存档此文件

.wide-div {    
   padding: 0 9999%;
   margin: 0 -9999%;
}

同样在这种情况下，如果出现水平滚动条，则可以使用

body {overflow-x: hidden;} 

根据情况的不同，此代码的区别在于此处的内部内容与父宽度保持一致

body {overflow-x: hidden;} 

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

#something {
  border: 2px solid red;
}
#something-else {
  border: 2px solid red;
}

#wide-div {
  padding: 0 9999%;
    margin: 0 -9999%;
  border: 2px solid green;
}

<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Wide</div>
  <div id="something-else">Other content</div>
</div>