Question

我知道这可能是一个常见问题，但我没有在本网站或其他网站找到解决方案。

我做了这个小提琴： http://jsfiddle.net/xzdead/jxsYx/3/

内部div'div_mainPanel'是100％宽度，但是如果你看右下角它就是父div。

我试过去除宽度：100到内部div和宽度问题解决但不是高度。无论如何，如果我将wodth设置为100％并且margin-padding设置为0px，为什么它会从父div中增长？

提前致谢

Answer 1

边界计算尺寸计算。你的内部div占据了父级的高度/宽度的100％，因此它变为500x300，但是然后为边框增加了2px，所以它实际上是502x302并且在父/右边缘的边缘上泄漏。

Answer 2

这是正确的行为。内部div设置为父级的100％宽度，但这不包括边框，因此它是100％+ 2px。

要防止内部div显示在父级的边界之外，请将box-sizing: border-box添加到父级和子级：

#div_mainContainer {
  width: 500px;
  height: 300px;
  background-color: #f8f8f8;
  border: 1px solid red;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

#div_mainPanel {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 1px solid yellow;
  box-sizing: border-box;
}

<div id="div_mainContainer">
  <div id="div_mainPanel"></div>
</div>

Answer 3

现在有一种更好的方法可以解决这个问题：对CSS使用border-box大小调整：

http://paulirish.com/2012/box-sizing-border-box-ftw/

现在100%将是一种更自然的方式来设置子元素的大小。

Answer 4

那是因为border属性超过了100％...与填充值相同。

这就是为什么它的2px了。

Answer 5

border属性不是以框的宽度计算的。所以你的盒子实际上被计算为边框的100％+ 2px。对于宽度，只需删除width: 100%因为分区（块级元素）已经扩展以自动填充容器的宽度，优于100％宽度可以做（因为它将考虑填充，边框，和保证金）。

如果您总是在父容器上使用精确的高度，为什么不在孩子身上使用精确的498px高度，这将计算为孩子的总高度为500px。

内部div 100％父div的宽度超出边界

5 个答案: