CSS 如何创建一个跨屏幕但不在 body 标签中的水平条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6208245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a horizontal bar that stretches across screen but is not in the body tag?
提问by Tigger
Very basic question!
很基础的问题！
I have a background pattern that repeats itself throughout the body tag. I would also like to have a top bar and bottom bar (head/footer) to repeat on the x axis - creating a nice sandwich style of solid color, pattern and solid color again for the background.
我有一个在整个 body 标签中重复的背景图案。我还希望有一个顶栏和底栏（页眉/页脚）在 x 轴上重复 - 再次为背景创建一个漂亮的纯色、图案和纯色三明治样式。
How can this be accomplished?
如何做到这一点？
The bars need to be 100% width - which is why this isn't being done through the content wrapper or the header/footer div as they are set to 1000px wide. The color bars should go across the entire screen.
条形需要 100% 宽度 - 这就是为什么这不是通过内容包装器或页眉/页脚 div 来完成的，因为它们被设置为 1000 像素宽。颜色条应该穿过整个屏幕。
回答by thirtydot
You should:
你应该：
- Ensure you have
html, body { margin: 0; padding: 0 } - Add the
#headerBarand#footerBaroutside of your "content wrapper".
- 确保你有
html, body { margin: 0; padding: 0 } - 添加“内容包装器”的
#headerBar和#footerBar外部。
Something like this: http://jsfiddle.net/GDDA5/
像这样的东西：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
}
Or if you would like the bars to stick to the viewport and be behind content: http://jsfiddle.net/GDDA5/3/
或者，如果您希望酒吧坚持视口并在内容后面：http: //jsfiddle.net/GDDA5/3/
回答by jahrichie
i'm late to the parity here, but use css3!
我迟到了这里的奇偶校验，但使用 css3！
#selector:after { content: '|' }
回答by Etorres
You should take the footer div out of the content wrapper div, then it should take the body width dimensions automatically, giving you the effect you are looking for.
您应该从内容包装器 div 中取出页脚 div，然后它应该自动获取主体宽度尺寸，从而为您提供所需的效果。
