内部 div 100% 父 div 的宽度超出界限答案

【问题标题】：Inner div 100% width of parent div exceeds bounds内部 div 100% 父 div 的宽度超出界限
【发布时间】：2011-12-24 15:08:59
【问题描述】：

我的内部#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>

【问题讨论】：

感谢大家的宝贵时间！

标签： css html

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

如果您总是在父容器上使用精确高度，为什么不直接在子容器上使用 498 像素的精确高度，这样子容器的总高度将计算为 500 像素。

【讨论】：

【解决方案4】：

在尺寸计算中，边框很重要。您的内部 div 获取父级的 100% 的高度/宽度，因此它变为 500x300，但随后在边框周围添加 2px，因此它实际上是 502x302 并且在右/下边缘的父级边框上泄漏。

【讨论】：

一个小观察：如果它在周围添加 2px 边框，大小变为 504x304。 :)

【解决方案5】：

那是因为边框属性超过了 100%...与填充值相同。

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

【讨论】：