如何创建一个横跨屏幕但不在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/