内部div的宽度超出了父div的范围，达到了100%。

Question

我的内部#div_mainPanel宽度为100％，但如果你看右下角，它超出了父级div。我尝试从内部div中删除width: 100，宽度问题解决了，但高度没有解决。

如果我将宽度设置为100％并且边距/填充设置为0px，为什么它会显示在父div之外？

提前感谢。

#div_mainContainer {
  width: 500px;
  height: 300px;
  background-color: #f8f8f8;
  border: 1px solid red;
  margin: 0px;
  padding: 0px;
}

#div_mainPanel {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 1px solid yellow;
}

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

- Victor

---

感谢大家抽出时间！ - Victor

Answer 1

这是正确的行为。内部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>

- Rory McCrossan

Answer 2

边框在尺寸计算中很重要。您的内部div获取父元素100％的高度/宽度，因此它变为500x300，但是然后增加了2像素的边框，所以实际上是502x302，并且会泄漏到父元素的右侧/底部边框上。

- Marc B

---

一点小观察：如果在周围添加2像素边框，大小将变为504x304。 :) - Ganesh Jadhav

Answer 3

现在有更好的方法来解决这个问题：在CSS中使用border-box 尺寸设置。详情请见http://paulirish.com/2012/box-sizing-border-box-ftw/。现在，100%将是设置子元素大小的更自然的方式。

- Andrew Mao

Answer 4

这是因为边框属性超过了100%...和填充值一样。

这就是为什么它会多出2像素。

- Graeme Leighfield

Answer 5

边框属性也不会计算在盒子的宽度中。因此，您的盒子实际上被计算为100% + 2px的边框。对于宽度，只需删除width: 100%，因为分割（块级元素）将自动扩展以填充容器的宽度，比100％的宽度更好（因为它将考虑填充、边框和外边距）。

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

- animuson