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

Question

3

请参考以下示例：example：

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

我的预期结果是，浏览器将总内容宽度注册为200像素，而不是400像素，但是当窗口调整为小于400像素时，水平滚动条会出现。这是怎么回事？

- Yarin

你想通过将内部div宽于外部div来实现什么目的？ - wdm

@wdm- 这始于我在这里提出的一个背景居中问题（你解决了它），但我将其作为一个更理论的问题提出，希望更好地理解布局原则。 - Yarin

4个回答

1

正如Gareth所提到的，边距不会影响盒子的大小。解决方案相当简单。外部容器需要是400像素，这将触发水平滚动条。内部容器需要是200像素，左右各有100像素的边距。当你调整窗口大小时，只要小于外部容器，滚动条就会出现。

- Brent Friar

@Brent- 这不是我想要实现的目标。整个重点在于，我希望滚动条仅在200像素宽度处触发，并忽略400像素宽度，尽管看起来这可能是不可能的... - Yarin

嗯，那么为什么要将任何东西设置为400像素呢？如果您只希望200像素处出现滚动条，则可以将包装器设为该大小。您应该更新您的问题，以便不会说您希望它们在400像素处，这样其他人就不会感到困惑了。 - Brent Friar

@Brent- 这是为了拥有一个不影响布局的溢出背景。无论如何，我不是在寻找替代方案，只是想解释一下负边距在这种情况下如何影响布局。 - Yarin

啊，这样就更有意义了。感谢您的澄清。 - Brent Friar

1

Gareth的回答是正确的。即使有负边距，div仍然是标准页面流的一部分，不会在布局方面被忽略。真正的页面内容不能为滚动目的而被忽略。

然而，如果您这样做是为了美观，比如在页面两侧有一个超出最大宽度的阴影，这可以通过背景实现 - 这个问题应该会有所帮助。

- CVM

0

尝试将这个添加到你的CSS中...

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

- wdm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gareth · Accepted Answer

负边距不会调整

的宽度。负左边距将使

向左移动到页面流中的位置，而负右边距将允许其他元素以边距的数量重叠在

的右侧。

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

从您的问题中，我认为您需要使用overflow: hidden来将大的

包含在较小的

中，而不会溢出其边界。