Html 100% 宽度大于父级的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18031354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% width is bigger than parent's div
提问by Amirhossein Kazemnejad
I'm working on vBulletin theme, but on thread list, every thread has 100% for its width but threads are also bigger than their parents, but when i remove border of threads, they will fit parent's div:). so think this problem is on borders.
我正在研究 vBulletin 主题，但在线程列表中，每个线程的宽度为 100%，但线程也比它们的父线程大，但是当我删除线程的边框时，它们将适合父级的 div:)。所以认为这个问题是边界问题。
You can see that better on jsfiddle(thread is white shape with black border)
您可以在jsfiddle上更好地看到（线程是带有黑色边框的白色形状）
<body>
<div class="after-body">
<div class="body-wrapper">
<div class="threadlist">
<ol class="threads">
<li class="threadbit"><div class="thread"></div></li>
<li class="threadbit"><div class="thread"></div></li>
</ol>
</div>
</div>
</div>
</body>
回答by MightyPork
The problem here is that the widthis a size of the inner area with text, and the padding with border are "wrapped" around it. That specification makes no sense, but most modern browsers follow it.
这里的问题是width带有文本的内部区域的大小，并且带有边框的填充被“包裹”在它周围。该规范毫无意义，但大多数现代浏览器都遵循它。
Your savior is called box-sizing: border-box;.
你的救星被称为box-sizing: border-box;。
.threadbit .thread {
/* ... some stuff ... */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Look here: jsFiddle
看这里：jsFiddle
回答by Turnerj
Yep you are right, the borders are pushing out the "width" of the element. The is the default box-sizingof modern browsers. This can be modified in most with a declaration like:
是的，你是对的，边框正在推出元素的“宽度”。这是现代浏览器的默认框大小。这可以在大多数情况下使用如下声明进行修改：
.threadbit .thread {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Note that it isn't supported below IE8 so depending what you are making and the support you want, you may need to find an alternative solution or design.
请注意，它在 IE8 下不受支持，因此根据您正在制作的内容和您想要的支持，您可能需要找到替代解决方案或设计。
EDIT
编辑
It has been a while since my original answer and browser support has changed slightly. Firefox 29, Chrome 10, Safari 5.1 and Internet Explorer 8 onwards all support box-sizingunprefixed however there are a few known issues from particular versions.
自从我的原始答案和浏览器支持略有变化以来已经有一段时间了。Firefox 29、Chrome 10、Safari 5.1 和 Internet Explorer 8 以后都支持不带box-sizing前缀的，但是特定版本存在一些已知问题。
The full/up-to-date list is available on caniuse.comhowever here is a few ones I found important from the site:
完整/最新列表可在caniuse.com上找到，但这里有一些我从网站上发现的重要列表：
- IE8: ignores
box-sizing: border-boxif min/max-width/height is used - IE8: the
min-widthproperty applies tocontent-boxeven ifbox-sizingis set toborder-box - IE9: the width of the scrollbar is subtracted from the width of the element when set to
position: absoluteand eitheroverflow: autooroverflow-y: scroll
- IE8：忽略
box-sizing: border-box是否使用最小/最大宽度/高度 - IE8：该
min-width属性适用于content-box即使box-sizing设置为border-box - IE9：当设置为
position: absoluteandoverflow: auto或overflow-y: scroll
As the market share for IE8 and IE9 decrease, these issues and the other listed on caniuse will be less of an issue in the future.
随着 IE8 和 IE9 的市场份额下降，这些问题和其他在 caniuse 上列出的问题在未来将不再是问题。
回答by Vinod S Pattar
Always remember when you encounter problems related to width check dimensions of element through box model from firefox developer tool or from chrome's metrix box. Its alway a good idea to include
永远记住，当您遇到与通过 Firefox 开发人员工具或 chrome 的 Metrix 框的框模型检查元素的宽度相关的问题时。包括在内总是一个好主意
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also make sure to check display property. If a element is made display inline it won't take width, margin & padding values and if it is displayed as inline-block it take width, margin & padding.
还要确保检查显示属性。如果一个元素被内联显示，它不会占用宽度、边距和填充值，如果它显示为内联块，它会占用宽度、边距和填充值。
Here is a link for box-sizing property http://www.paulirish.com/2012/box-sizing-border-box-ftw/
这是 box-sizing 属性的链接http://www.paulirish.com/2012/box-sizing-border-box-ftw/
