如何使包裹的div水平填充窗口？

Question

我有一个div，它由另一个960px宽的居中div包含。我正在为内部div添加一个背景，它应该水平扩展到窗口的边缘，基本上是逃避其容器的边界。如果我应用较大的负边距和相等数量的填充，则此操作在左侧，但右侧会导致滚动条出现。有没有人知道如何在不造成滚动条的情况下实现这一目标？

Answer 1

你可以绝对定位内部div：

CSS

.outerdiv { width: 960px; background: #999; height: 50px; }
.innerdiv { position: absolute; top: 100px; left: 0; background: #ccc; width: 100%; }

HTML

<div class="outerdiv">This is in the outer div
 <div class="innerdiv">This is in the inner div</div>
</div>

或更好的是，移动div以使文档正文为其父级。

Answer 2

我总是将我的叠加DIV放在内容包装器之外，这样它就不会受到布局的约束。

如果你是盒装（没有双关语）你可以使用JavaScript添加这个DIV，将它放在你想要的DOM中。

Answer 3

听起来外部div被设置为（或继承）overflow：auto而不是overflow：visible。