Question

所以我想要完成一些事情。我正在建立一个响应式网站，我遇到了一个有趣的问题。

我有一个#wrapper，它的背景是#FFF。在显示需求的内部，我放置了一个包含一些内容和一个主体的标题，每个标题都有不同的背景，因此很容易看到它位于何处。

对于我的Wrapper，我给它的宽度为100％，因此它会扩展并与浏览器窗口签约。但是它的最大宽度限制在750px，因为我不希望网站比这更宽。

#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
width:100%;
max-width:750px;
background:#FFF;
}

注意我在其上放置了一个0px 20px的填充。这就是我的问题所在。当您重新调整浏览器窗口大小时，包装器会与它一起收缩，但由于某种原因它忽略了右侧的填充。我想确保不会发生这种情况，因为无论浏览器窗口大小，我都希望左边有20个像素空间。右边。

任何想法，提示，课程:)？ http://jsfiddle.net/wuJ9H/

谢谢！

Answer 1

添加box-sizing:border-box为我修复了它（Chrome 26，FF 19，IE9 / 10）。这会导致填充包含在宽度计算中。

示例：http://jsfiddle.net/wuJ9H/3/

#wrapper {

    position:relative;
    margin:20px auto;
    padding:0px 20px;
    width:100%;
    max-width:750px;
    background:#FFF;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

为什么会这样？

当您重新调整浏览器窗口大小时，包装器会收缩有了它，但由于某种原因它忽略了右边的填充。

要明确的是，您的原始版本不仅隐藏了正确的填充区域。它隐藏了右边的填充区域+ 20px，即左边填充区域的宽度。这是因为你告诉盒子100％宽加上任何填充或边框。

因此，你的盒子宽100％+ 40px。

添加box-sizing: border-box指示浏览器在宽度计算中包含填充和边框。它对于基于百分比的值非常方便。

The box-sizing CSS property

Answer 2

如果您将box-sizing:border-box添加到#wrapper，那么填充将包含在width中。

jsFiddle

#wrapper {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

您可能想要max-width:790px现在可以在窗口宽时显示相同内容。

支持

IE7及Reference以下不支持

box-sizing。如果你想支持IE7，那么你需要在#wrapper内放置一个内包装。

jsFiddle

#wrapper {
    position:relative;
    margin:20px auto;
    width:100%;
    max-width:750px;
}
#inner {
    padding:0px 20px;
    background:#FFF;
}

Answer 3

在解决问题时，只需删除宽度即可保持扩展功能：

#wrapper {
    position:relative;
    margin:20px auto;
    padding:0px 20px;
    max-width:750px;
    background:#FFF;
}

http://jsfiddle.net/wuJ9H/2/

Answer 4

您需要在尺寸定义中包含填充。将box-sizing:border-box添加到包装器元素。

需要一个快速的CSS提示？

4 个答案:

为什么会这样？

支持