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

Question

整个页面的父元素是一个居中的 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 应该填满屏幕的整个宽度。它包含一个宽度超过 960 像素的单个图像，它应该为整个屏幕宽度设置不同的背景颜色。

我不能轻易地从父 div 中取出那个 div，它会弄乱我布局的其他部分，这会使整个事情变得相当尴尬。

我发现了一些关于如何实现这一点的技巧，但似乎没有一个符合我的要求。我的设计是响应式的，或者至少我正在努力实现这一点。我发现的技巧依赖于了解所涉及元素的大小，这在我的案例中不是固定的。

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

Answer 1

您可以根据 vw(视口(viewport)宽度)设置宽度。您也可以使用 calc 函数使用该值来计算 div 的左边距。通过这种方式，您可以将它放置在流中，但仍然突出在居中的固定宽度 div 的左侧和右侧。

支持非常好。 vw 是 supported by all major browsers, including IE9+ . calc()也是如此.如果您需要支持 IE8 或 Opera Mini，那么您就不适合使用这种方法了。

-编辑-

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

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