Question

我不明白为什么我的第一个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>

另见http://dabblet.com/gist/1933615。

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

这里发生了什么？

Answer 1

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

Answer 2

我认为它与像素舍入有关。

你的规则是#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，请查看布局（子）选项卡（选择HTML选项卡时）。（我相信你可以用Firebug Lite，Chrome开发工具和IE开发工具以类似的方式分析它）

希望这会有所帮助。异

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

2 个答案: