2

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

我有一个#wrapper，它的背景是#FFF。为了显示需要，我在其中放置了一个包含一些内容和正文的标题，每个标题都有不同的背景，因此很容易看到放置在哪里。

对于我的 Wrapper，我给了它 100% 的宽度，因此它可以随着浏览器窗口扩展和收缩。但将它的最大宽度限制为 750 像素，因为我不希望网站比这更宽。

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

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

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

谢谢！

4

4 回答 4

4

添加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指示浏览器在宽度计算中包括填充和边框。这对于基于百分比的值非常方便。

于 2013-04-04T00:07:39.847 回答
3

如果添加box-sizing:border-box到，#wrapper则填充将包含在width.

jsFiddle

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

您现在可能希望max-width:790px在窗口较宽时使其显示相同。

支持

box-sizing在 IE7 及以下参考中不支持。如果你想支持 IE7 那么你需要在里面放置一个内部包装器#wrapper。

jsFiddle

#wrapper {
    position:relative;
    margin:20px auto;
    width:100%;
    max-width:750px;
}
#inner {
    padding:0px 20px;
    background:#FFF;
}
于 2013-04-04T00:09:16.630 回答
2

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

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

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

于 2013-04-04T00:10:37.033 回答
1

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

于 2013-04-04T00:07:28.920 回答