CSS DIV宽度100％超出DIV

Question

我有一个宽度为512px的DIV。然后在这个DIV里面还有另一个DIV。我将那个DIV的宽度设置为100%。然而，它超出了边界，这不是我想要的结果。

我想让它保持在DIV内部，例如每个边缘都有5px的填充。 http://jsfiddle.net/weka/USvTC/

- test

Answer 1

这个问题的原因是 padding 和 border 不属于 width: 100% 的一部分。

假设您确实想要绝对定位 #exp_wrap，请使用此代码：http://jsfiddle.net/thirtydot/USvTC/1/ 我移除了 .bar_wrap/#exp_wrap 上的 width: 100%，并在 #exp_wrap 上添加了 right:5px;。

块级元素（如 div）默认为 width: auto，并占用整个可用水平空间。这类似于 width: 100% 的工作方式，不同之处在于 padding 和 border 在 width: auto 中被计算在内。

如果 #exp_wrap 不需要绝对定位，请使用此代码：http://jsfiddle.net/thirtydot/USvTC/2/ 我再次移除了 .bar_wrap/#exp_wrap 上的 width: 100%，并将 position:absolute; top:5px; left:5px; 替换为 margin: 5px;。我还在 .container 中添加了 overflow: hidden，以避免边距折叠。

- thirtydot

---

链接已经失效了！我讨厌 JSFiddle。 - Amir Shabani

@AmirA.Shabani：很可能是由于这个jsFiddle bug导致的。我没有删除任何内容，所以我只能假设jsFiddle用户“weka”（问题OP，原始演示的创建者）删除了他的基本演示，因此我的更新也因此被删除。幸运的是，我的答案包括足够的文本描述，希望它仍然有用，如果存在width: 100%，则删除它是主要的重点。 - thirtydot

Answer 2

只需将子元素的宽度设置为512-(2*5)像素的宽度（502），而不是100%。

- mpen

Answer 3

也许问题出在子 div 的 box-sizing 上。你可以将其设置为 border-box，这样子 div 就不会比父 div 更长了：

.child-div {
   box-sizing: border-box;
}

您可以在此处阅读有关 box-sizing 属性的更多信息。

- seby598