视口较小，缺少最外边距

Question

我有<div id="wrapper"></div>​

#wrapper {
    height: 300px;
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
}​

当我调整视口大小以便显示水平滚动条时，右边距消失;我只能在元素的内容中向右滚动，但我希望边缘存在于所有方面。如果应用right: 0;，它也会发生在左边距，如果视口缩短，则会发生在底部边距。给wrapper一个position: static;（默认）没有任何区别。

为什么会这样？它不遵循正常的margin collapse rules。我怎样才能获得保证金？我试过给身体填充/边缘.. nada。

• jsFiddle

Answer 1

背景资料

body元素的默认宽度是html宽度，这也是窗口宽度（或在这种情况下为iframe宽度）。块级元素的默认行为是滚动仅考虑实际元素（因此，如果没有更多内容显示在右侧，则它不关心右边距）。这会导致您的正确保证金问题。 （顺便说一下，根据this article，滚动条实际上​​出现在html元素上，而不是正文中。）

对于Position: Absolute

将#wrapper与position: absolute放在一起，body元素的结尾为零。这会导致您的底部保证金问题。

解决方案是考虑到这样的边距（see fiddle）：

body {
    min-height: 320px;
    min-width: 420px; 
}

这为body指定了一个最小尺寸，等于绝对元素的宽度+边距和高度+边距。

现在，如果你设置了right: 0，我不确定你预期会发生什么，因为强制左边距“保持”只是最终造成一个过早的滚动条激活。请参阅this fiddle。

关于Position: Static

可以通过使用（see fiddle）在body元素上强制收缩包装行为来更改默认的块级别行为：

body { display: inline-block; }

注意：body { float: left; }没有给我相同的收缩包装行为（see fiddle）。

inline-block元素将考虑其内部元素的边距以确定其自身的宽度，然后允许右边距起作用。

display: inline-block;解决方案对#wrapper position: absolute不起作用的原因是因为它使body的宽度和高度为零，因为绝对定位需要该元素在流动之外，body内没有任何东西可以给它维度。

以上内容目前仅在IE9上测试过。

Answer 2

我担心只有一个简单而快速的解决方案，那就是在包装器div中创建一个新的div。

http://jsfiddle.net/QHKmN/2/

CSS

#wrapper {
    background: black;
    height: 300px;
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
}

#inwrapper {
    background: green;
    height: 290px;
    margin: 5px auto;
    position: relative;
    width: 390px;
}
​

HTML：

<div id="wrapper">
    <div id="inwrapper">

    </div>
</div>
​

还有你的保证金。