Raphael 100% paper is giving me a vertical scrollbar

Question

I've been using the Raphael library and have encountered an odd issue.

My test HTML contains only a div with an ID of "main". My CSS is simply-

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
body, html {
    height: 100%;
    width: 100%;
}
#main {
    height: 100%;
    width: 100%;
}

I can add more stuff to the HTML without any scrollbars appearing. But, as soon as I add-

var paper = Raphael("main", "100%", "100%");

I get a vertical bar. Does anyone have any insight as to why? If I set it to "98%" it goes away, and I am willing to accept that as a quick and dirty workaround, but I like to know the why's of everything. Plus, who knows how that will react to different platforms.

Answer 1

Man, I really couldn't figure out "why"!

But I've created a fiddle with your issue ( http://jsfiddle.net/Z8dYT/ ), and by coloring the div and body it's possible to see that the div is still the correct height. Just the body is a little overflowed.

If that's ok for you, just add a overflow:hidden to the body, and it will be all right. Otherwise, at least I hope the fiddle will be handy =)

Answer 2

I'm guessing it might be an issue with box-sizing. Try this:

#main {
    box-sizing: border-box; 
}

A jsfiddle helps so much, by the way. http://jsfiddle.net/