Question

I do not understand why my first div (#a) has a vertical scrollbar on this test:

*, 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>

Also see http://dabblet.com/gist/1933615.

As I see it, my inner div (#b) should take 100% (90% + 5% + 5%) and #a should not have any scrollbar. But it looks like #b is taking 101%.

What’s going on here?

Answer 1

I think that it has to do with pixel-rounding.

Your rule is that #b occupies 90% of #a and has a margin on top of 5% and a margin on the bottom of another 5%. You’d think that would amount to 100%, right? 😉

Ran two scenarios and checked in Firebug what Firefox was doing with those values.

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

BTW, if you’re looking at a resolution where all the proportions give you nice round numbers, there are no scrollbars.

If you want to see this visually and have access to Firebug, check out the Layout (sub)tab (when the HTML tab is selected).
(I’m sure you can analyse it in a similar fashion with Firebug Lite, Chrome dev tools and IE dev tools)

Hope this helps.
iso