html - 站点的拉伸元素

Question

看看样机图像

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

我打算使用绝对定位来实现它。但我需要知道块的宽度。由于它可能不同，我不知道该怎么做，除了使用 javascript。但我只想使用 html 和 css。

Answer 1

有很多方法可以做到这一点，但最酷的是使用before&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 的这篇很酷的文章：完整的浏览器宽度条。

Answer 2

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

您将添加 800 加上条纹的宽度并分配固定的左右。

由于缺少 jsfiddle，这就是我所能提供的