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

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

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

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

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

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

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

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

你是对的，这不适用于居中.请尝试以下操作：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>

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

支持相当不错。 支持所有主流浏览器，包括 IE9+。calc（） 也是如此。如果您需要支持 IE8 或 Opera Mini，那么这种方法就不走运了。vw

-编辑-

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

-编辑 2021-

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

#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>

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

您现在可以执行此操作

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

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

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

这应该可以做到。

#wide-div{
    position: absolute;
    width: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    background: white;
    left: 0;
    margin-left: 0;
    overflow-x: hidden;
    z-index: 99999;
}