如何在不使用水平滚动条的情况下将div（或背景）扩展到水平页面边界？ [英] How do I extend a div (or background) past the horizontal page boundaries, without having a horizontal scroll bar?

问题描述

我想设置一个页面，以便导航栏有一个水平延伸到窗口边缘的背景，但页面的实际内容保持在960px宽的容器内。

I'm trying to set up a page so that the navigation bar has a background that extends horizontally past the edges of the window, but the actual content of the page remains within a 960px wide container.

这里有一个链接到目前为止，它看起来像我想要的方式，但有一个问题。

Here's a link to what I've got so far, it looks the way I want it to but there's a problem.

http：//jsfiddle.net/pFDDV/3/

问题是，页面仍将水平滚动到过度扩展的div的结尾，在右侧。它不会有这个问题，左，只是正确（我认为是由于元素处理负边距/定位）。我想我可能能够只是离开：

The problem is that the page will still scroll horizontally to the end of the over extended div, on the right side. It DOESN'T have this problem going left, only right (which I assume is due to the way elements deal with negative margins/positioning). I thought I might be able to just get away with:

body {
    width: 100%;
    overflow-x: hidden;
}

隐藏底部滚动条，但您仍然可以向右滚动箭头键，如果你调整页面小于960px的实际内容，你不会得到像你应该的水平滚动条。

Which hides the bottom scroll bar, but you can still scroll right with the arrow key, and if you resize the page smaller than the 960px of actual content, you don't get a horizontal scrollbar like you should.

有任何方法，我可以页面忽略只有那个div的宽度？

Is there any way I can make the page ignore the width of just that one div?

我99.9％确定我在某个地方看到这个工作，但我不记得在哪里，顶/左，底/右规则负边际/定位导致我相信这只是可能不工作。任何想法？

I'm 99.9% sure I saw this work somewhere, but I can't remember where, and research on the top/left, bottom/right rules of negative margin/positioning leads me to believe this just might not work. Any ideas?

另外：我知道我可以用一个重复的背景图片，但我试图避免使用图像。

Also: I know I could probably do this with a repeating background image, but I'm trying to avoid using images.

推荐答案

您可以使用 position：absolute 写如下：

#mWrapper {
    background: none repeat scroll 0 0 red;
    height: 30px;
    left: 0;
    position: absolute;
    right: 0;
}

检查此 http://jsfiddle.net/sandeep/pFDDV/5/

这篇关于如何在不使用水平滚动条的情况下将div（或背景）扩展到水平页面边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！