拉伸网站的元素

Question

看看模型图像

该网站具有固定的内容宽度。我需要拉伸红色区域内的元素，具体取决于屏幕宽度。因此，如果它像图像一样，绿色和蓝色条纹应该一直到屏幕的末尾。如果屏幕较宽，则站点内容区域（在垂直红线内）将是相同的。但是蓝线和绿线会拉伸更多，到达左右两侧的位置。

我打算用绝对定位来实现它。但我需要知道块的宽度。并且因为它可以是不同的我不知道如何做，除了使用JavaScript。但我只想使用html和css。

Answer 1

有很多方法可以实现这一目标，但最酷的方法是使用before＆amp; after填充边缘的伪元素。

.container {
    width: 1200px; /* whatever... */
    margin: 0 auto;
}

.header {
    position: relative;
    background: #000; /* whatever... */
}

.header:before, .header:after {
    content: '';
    position: absolute;
    background: #000; /* whatever... */
    top:0 ; bottom: 0; width: 999em;
}

.header:before {
    right: 100%;
}
.header:after {
    left: 100%;
}

这是小提琴：http://jsfiddle.net/bnket/

---

查看Chris Coyer撰写的这篇很酷的文章：Full Browser Width Bars。

Answer 2

使用css假设您的中心内容宽度为800px ..

你会添加800加上条纹的宽度和asign固定左和＆amp;对  这就是它。

由于缺少jsfiddle

，这是我能提供的全部内容