Css 当高度、边距和填充加起来达到100%时，为什么会出现滚动条？

我不明白为什么我的第一个div（#a）在这个测试中有一个垂直滚动条：

*, html, body
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

#a
{
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    overflow: auto;
    background-color: indianred;
}
#b
{
    display: inline-block;
    position: relative;
    height: 90%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 0;
    width: 100%;
    background-color: grey;
}

<div id="a">
    <div id="b">TEST</div>
</div>

*，html，正文
{
保证金：0；
填充：0；
}
html，正文
{
身高：100%；
宽度：100%；
位置：绝对位置；
溢出：隐藏；
}
#a
{
身高：100%；
宽度：100%；
显示：块；
位置：相对位置；
溢出：自动；
背景色：印度红；
}
#b
{
显示：内联块；
位置：相对位置；
身高：90%；
利润率最高：5%；
利润底部：5%；
填充：0；
宽度：100%；
背景颜色：灰色；
}
测验

另见

在我看来，我的内部div（#b）应该是100%（90%+5%+5%），而#a不应该有任何滚动条。但看起来#b占了101%

---

这是怎么回事？

我认为这与像素舍入有关

#a
{
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    overflow: auto;
    background-color: indianred;
}

你的规则是#b占据#a的90%，利润率在5%之上，利润率在另一个5%的底部。你会认为那将是100%，对吗？；）

运行了两个场景，并在Firebug中检查Firefox对这些值做了什么

Scenario 1 - #a is 600px tall
#b height = 540px
#b margin-top = 30px
#b margin-bottom = 30px
540 + 30 + 30 = 600px === #a's height

Scenario 2 - #a is 601px tall
#b height = 541px (601 * .9 = 540.9 -> rounded up by browser = 541)
#b margin-top = 31px (601 * .05 = 30.05 -> rounded up = 31)
#b margin-bottom = 31px 
541 + 31 + 31 = 603px > 601px -> #a's height

顺便说一句，如果你在看一个分辨率，所有的比例给你很好的整数，没有滚动条

如果您想直观地看到这一点并访问Firebug，请查看布局（sub）选项卡（选中HTML选项卡时）。 （我相信你可以用Firebug Lite、Chrome开发工具和IE开发工具以类似的方式进行分析）

希望这有帮助。

---

iso

我认为这与像素舍入有关

你的规则是#b占据#a的90%，利润率在5%之上，利润率在另一个5%的底部。你会认为那将是100%，对吗？；）

运行了两个场景，并在Firebug中检查Firefox对这些值做了什么

Scenario 1 - #a is 600px tall
#b height = 540px
#b margin-top = 30px
#b margin-bottom = 30px
540 + 30 + 30 = 600px === #a's height

Scenario 2 - #a is 601px tall
#b height = 541px (601 * .9 = 540.9 -> rounded up by browser = 541)
#b margin-top = 31px (601 * .05 = 30.05 -> rounded up = 31)
#b margin-bottom = 31px 
541 + 31 + 31 = 603px > 601px -> #a's height

顺便说一句，如果你在看一个分辨率，所有的比例给你很好的整数，没有滚动条

如果您想直观地看到这一点并访问Firebug，请查看布局（sub）选项卡（选中HTML选项卡时）。 （我相信你可以用Firebug Lite、Chrome开发工具和IE开发工具以类似的方式进行分析）

希望这有帮助。

---

iso

我没有看到滚动条。你在哪个浏览器中看到这个？我没有看到滚动条。您在哪个浏览器中看到这个？谢谢您的回答！但两个元素之间的差距大于2px（我可能不应该说“101%”（我只是说它比预期的大）。事实上，我忘记了边距是根据容器宽度计算的：：“百分比：指包含块的宽度”，而如果边距是“边距顶部”或“边距顶部”，我希望它指的是高度“边距底部”。谢谢你的回答！但这两个元素之间的差距大于2px（我可能不应该说“101%”（我只是说它大于预期）。事实上，我忘记了边距是根据容器宽度计算的：：“百分比：指包含块的宽度。”“然而，如果边距为“边距顶部”或“边距底部”，我希望它指的是高度。