在不影响正文宽度的情况下使用宽背景 div 的技术答案

【问题标题】：Technique for using a wide background div without affecting body width在不影响正文宽度的情况下使用宽背景 div 的技术
【发布时间】：2011-04-17 21:38:16
【问题描述】：

请参考example，并附上以下解释：

我有一个带有超宽居中背景图片的网页。我希望页面的正文宽度折叠到内容，并忽略包含背景的 div。在给定的示例中，我有一个简化的示例来说明如何执行此操作：bg-outer div 建立正确的页面宽度（200px 宽），bg-inner div（400px 宽）包含超宽图像。然后我使用溢出：可见和负边距来尝试在不增加页面宽度的情况下使更宽的 bg-inner 居中。但是，如示例所示，当浏览器窗口小于 400 像素而不是 200 像素时，会出现水平滚动条。为什么会这样？有更好的方法吗？

谢谢-

编辑：

这是我最终找到的duplicate，它有一个类似但略有不同的解决方案。不过，我更喜欢 wdm 在这里给出的答案。

【问题讨论】：

"我希望页面的 body 宽度折叠到内容，并忽略包含背景的 div。"你能澄清一下吗？
我希望我的页面宽度被识别为 200px，这样只有在浏览器小于该值时才会显示 h-scrollbars。即使我使用的是 400 像素宽的背景图像，我也希望这种情况发生。（尺寸与示例相关。实际上，我正在使用 960 像素宽的页面，背景图像为 1400 像素以上宽。该图像居中，其两侧通常被截断，除非浏览器展开）。

标签： html css layout

【解决方案1】：

重复帖子：Why do negative margins affect my page width?

但是，这个更好地解释了您要完成的工作。

这很简单……

演示：http://jsfiddle.net/wdm954/L3U9c/

<div id="bg">
    <div id="content">
        Here is my content.
    </div>
</div>


#bg {
    background-color: red;
    background-position: top center; /* for images */
}
#content {   
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
    width: 200px;
    background-color: #ccc;
}

【讨论】：

@wdm- 你是一位学者和绅士- 这个优雅的解决方案非常有效- 谢谢
@wdm 如果浏览器宽度小于 200 像素，则背景图像保持居中，即使内容的左侧与视图窗格的左侧保持齐平。我有类似的问题，但我需要背景图像保持锁定到内容 div 所在的位置，但不显示 bg div 中的滚动条比视图窗格更宽。

【解决方案2】：

你可以添加

body {
    overflow-x: hidden;
}

【讨论】：

我在示例中看不到它。我在添加我发布的行之前和之后尝试过，发现滚动条消失了。
@Fareesh-我的错，你是对的，它不在前面的示例中，但仍然不适合我的解决方案-溢出：隐藏会隐藏溢出-我想显示溢出，但在布局方面忽略它。

【解决方案3】：

我认为你所做的一切只需要 3 行 CSS：

body {
    background-image:url('myurl.jpg');
    background-position:center;
    background-size:cover;
}

如你所见：

<body>
    <p>This is my document. Nothing else necessary</p>
    <!-- any other content you desire -->
</body>

【讨论】：

@ninjagecko-谢谢，但这不适用于我的情况-固定宽度背景与 y-repeating-试图弄清楚如何忽略示例中的实际 div 宽度...跨度>