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

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

支持还不错。 vw 是 supported by all major browsers, including IE9+。 calc() 也是如此。如果您需要支持 IE8 或 Opera Mini，那么您对这种方法不走运。

-编辑-

正如评论中提到的，当页面内容高于屏幕时，这将导致水平滚动条。您可以使用 body {overflow-x: hidden;} 抑制该滚动条。虽然以不同的方式解决它会很好，但使用 Width:100% without scrollbars 中提供的 left 和 right 的解决方案在这种情况下不起作用。

-编辑 2021-

滚动条的另一种解决方法，根据您的情况可能可以接受或不接受：通过使绿色 div 小一点，比如 20px，您可以为滚动条保留一点空间。保留宽度的一半可以添加到边距，以保持宽 div 居中：

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);

div { 最小高度：40px; box-sizing：边框框； } #container { 位置：相对； } #parent { 宽度：400px;边框：1px纯黑色；边距：0 自动； } #something { 边框：2px 纯红色； } #wide-div { 宽度：计算（100vw - 20px）；左边距：计算（-50vw + 50% + 10px）；边框：2px 纯绿色； }

---

经过大量研究，我找到了这个解决方案：Creating full width (100% ) container inside fixed width container。我认为这是最好的解决方案，因为它不依赖于任何外部因素，只依赖于你想要扩展的 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%;
}

---

您现在可以执行此操作

.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/

---

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

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

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

---

我有点惊讶在过去 4 年里没有人提供以下服务。 css position:fixed 属性将项目拉出并相对于窗口进行缩放。在某些情况下，这可能不起作用，但是如果您正在对模态框或其他东西进行 Javascript 处理，则可以正常工作。

.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
}

---

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

.parent { 宽度：200px;高度：200px；背景：红色； } .child { 宽度：100vw;高度：50px；背景：黄色； }

你是对的，这不适用于居中的 div。试试这个：

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

.parent { 宽度：200px;高度：200px；背景：红色；边距：0 自动； } .child { 宽度：100%;左：0；右：0；位置：绝对；高度：50px；背景：黄色； }

---

我的50cent在这里..

虽然我发现其他人的答案也是正确的，但我认为需要提到一个旧的 css 技巧来存档这个

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

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

body {overflow-x: hidden;} 

视情况而定，这段代码的不同之处在于这里的内部内容与父宽度保持对齐

身体 {overflow-x: hidden;} div { min-height: 40px; box-sizing：边框框； } #parent { 宽度：400px;边框：1px纯黑色；边距：0 自动； } #something { 边框：2px 纯红色； } #something-else { 边框：2px 纯红色； } #wide-div { 填充：0 9999%;保证金：0 -9999%；边框：2px 纯绿色； }