为什么负边距会影响我的页面宽度？

Question

请参考以下example：

在其中，200px宽的外部div用于确定页面宽度。它包含一个400px宽的内部div，但左/右负边距为-100px。

我的最终结果是浏览器将总内容宽度设置为200px，而不是400px，但是一旦窗口调整为小于400px，水平滚动条就会显示出来。这是怎么回事？

Answer 1

负边距不会调整div的宽度。负左边距会将div移动到页面流程中左侧的位置，负右边距将允许其他元素与div的右侧重叠数量保证金。

您可以在this jsFiddle中看到我的意思。

从您的问题来看，您需要overflow: hidden在较小的范围内包含较大的div而不会溢出其边界。

Answer 2

正如Gareth已经提到的那样，利润率不会影响盒子大小。解决方案相当简单。外部容器需要400px，这将触发水平滚动条。内部容器需要200px，左右边距为100px。调整窗口大小时，只要小于外部容器，就会出现滚动条。

http://jsfiddle.net/58VFB/

Answer 3

Gareth的回答是正确的。即使有负余量，div仍然是标准页面流的一部分，并且在布局方面不会被忽略。出于滚动目的，不能忽略正版页面内容。

但是，如果你这样做是为了审美，例如在页面两侧留下超出最大宽度的阴影，这可以通过背景来实现 - this question应该有帮助。 / p>

Answer 4

尝试将此添加到您的CSS ...

body {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}