如何创建一个横跨屏幕但不在body标签中的水平条？

Question

非常基本的问题！

我的背景图案在整个身体标签中重复出现。我还希望在x轴上重复一个顶栏和底栏（页眉/页脚） - 为背景再次创造一个漂亮的三明治样式的纯色，图案和纯色。

如何实现这一目标？

条形图需要100％宽度 - 这就是为什么这不是通过内容包装器或页眉/页脚div完成的，因为它们被设置为1000px宽。颜色条应该穿过整个屏幕。

Answer 1

你应该：

• 确保您拥有html, body { margin: 0; padding: 0 }
• 在“内容包装器”之外添加#headerBar和#footerBar。

像这样：http://jsfiddle.net/GDDA5/

html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    height: 100px
}
#headerBar {
    height: 40px;
    background: blue
}
#footerBar {
    height: 40px;
    background: red
}

或者，如果您希望条形图粘贴到视口并位于内容后面：http://jsfiddle.net/GDDA5/3/

Answer 2

我这里的平价迟到了，但是使用css3！

#selector:after { content: '|' }

Answer 3

您应该从内容包装器div中取出页脚div，然后它应该自动获取主体宽度尺寸，为您提供所需的效果。