CSS DIV宽度100％超过div

Question

我有一个宽度为512px的DIV。那个DIV里面是另一个DIV。我将THAT DIV的宽度设置为100％。然而，它不仅仅是我想要的。

我试图让它保持在div内。如在所有方面的5px填充。

http://jsfiddle.net/weka/USvTC/

Answer 1

发生此问题是因为padding和border不属于width: 100%。

假设您确实想要绝对定位#exp_wrap，请使用：http://jsfiddle.net/thirtydot/USvTC/1/

我在width: 100% / .bar_wrap上删除了#exp_wrap，并在right:5px;上添加了#exp_wrap。

div等块元素默认为width: auto，并占用完整的可用水平空间。这与width: 100%的工作方式类似，只是padding和border在 width: auto内计算。

如果#exp_wrap不需要绝对定位，请使用：http://jsfiddle.net/thirtydot/USvTC/2/

我再次移除了width: 100% / .bar_wrap上的#exp_wrap，并将position:absolute; top:5px; left:5px;替换为margin: 5px;。我还将overflow: hidden添加到.container以避免缩减边距。

Answer 2

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