<分区>
看一下模型图片
网站有固定的内容宽度。我需要根据屏幕宽度拉伸(stretch)红色区域内的元素。因此，如果它像图像一样，绿色和蓝色条纹应该一直延伸到屏幕的尽头。如果屏幕更宽，网站内容区域(即垂直红线内)将是相同的。但是蓝线和绿线会延伸得更远，到达左侧和右侧的站点。
我打算使用绝对定位来实现它。但我需要知道 block 的宽度。由于它可能不同，我不知道该怎么做，除了使用 javascript。但我只想使用 html 和 css。
<分区>
看一下模型图片
网站有固定的内容宽度。我需要根据屏幕宽度拉伸(stretch)红色区域内的元素。因此，如果它像图像一样，绿色和蓝色条纹应该一直延伸到屏幕的尽头。如果屏幕更宽，网站内容区域(即垂直红线内)将是相同的。但是蓝线和绿线会延伸得更远，到达左侧和右侧的站点。
我打算使用绝对定位来实现它。但我需要知道 block 的宽度。由于它可能不同，我不知道该怎么做，除了使用 javascript。但我只想使用 html 和 css。
最佳答案
有很多方法可以做到这一点，但最酷的方法是使用 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%;
}
这是 fiddle :http://jsfiddle.net/bnket/
查看 Chris Coyer 的这篇精彩文章:Full Browser Width Bars .
关于html - 网站的拉伸(stretch)元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18597424/