如果容器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扩展到整个屏幕宽度？

GolezTrol：

您可以基于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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。