包装器和容器内的全宽元素答案

【问题标题】：Full width elements within wrapper and container包装器和容器内的全宽元素
【发布时间】：2014-01-24 07:06:17
【问题描述】：

*这只是开发前的一般问题，因此没有提供代码。

我希望网站中间的 div 具有 100% 的背景宽度，以便一直穿过屏幕，但这个 div 位于包装器/容器内部（其宽度为 980 像素）所以它被限制为正常的内容宽度。

如果不结束包装器和容器，创建全宽 div，然后创建一组新的包装器/容器 div，怎么会发生这种情况？正如 w3 验证器对我所说，我应该不止一次拥有这些特定的 div。

【问题讨论】：

如果你想让你的背景一直穿过屏幕，为什么不把它应用到上呢？
差不多^这个。将背景图像应用于页面上较小的元素而不是最外面的元素（即您的主体）是没有意义的。

标签： html css

【解决方案1】：

如果没有示例，我不确定你想要什么，但你可能想尝试这样的事情：

<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
    width980
<div id="fullwidth">
    fullwidth
</div>
</div>

在这里，我给你做了一个小提琴：http://jsfiddle.net/Wde8W/

【讨论】：