body border-top 不超出视口
我需要沿着网站顶部一条紫色线。我没有使用图像，而是使用主体上的 border-top 属性。这在全视图中有效，但是当我调整浏览器窗口大小时，紫色线仅出现在视口中，当我向右滚动时，我会得到一个空白。 这是小提琴，这样你就明白我的意思了。我已经在主体和容器上尝试了 width: 100%，但无济于事。有人可以提出实现我需要的方法吗？
谢谢。
I need a purple line along the top of the site. Instead of using an image I'm using the border-top property on the body. This works in full view but when I resize the browser window the purple line appears only in the viewport, when I scroll to the right I get a white space. Here's the fiddle so you can see what I mean. I've tried width: 100% on both the body and the container, but to no avail. Can someone suggest ways to accomplish what I need?
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
不确定这是否是实现它的最佳方法，但您可以将
position:absolute;添加到正文。这可能会产生一些不良的副作用。Not sure if this is the best way to accomplish it, but you can add
position: absolute;to the body. This may have some undesired side effects.如果您知道文档宽度，则可以指定最小宽度。
If you know your documents width then you can specify a min-width.
尝试身体边框黑客:)
http://css-tricks.com/558-body-border /
专为固定位置设计，但也应该适合您。
Try the body border hack :)
http://css-tricks.com/558-body-border/
Designed for fixed position but should work for you as well.
将
display: inline-block;添加到body和container也有效。请参阅http://jsfiddle.net/K5zVq/16/。Adding
display: inline-block;to bothbodyandcontaineralso worked. See http://jsfiddle.net/K5zVq/16/.与 skoh-fley 相关的第二个答案（尽管可能后果较少）是将
float: left添加到body中： net/K5zVq/20/" rel="nofollow">http://jsfiddle.net/K5zVq/20/。虽然我想我会倾向于我在这里发布的第一个答案（尽管你比我更了解你的情况）。A secondary answer, related to skoh-fley's though maybe with less consequences, is to add
float: leftto thebody: http://jsfiddle.net/K5zVq/20/. Though I think I would lean toward my first answer posted here (though you know your situation better than I).