Why does IE display a vertical scrollbar with this 100% height content?

Question

I have a Silverlight video player that I want to display in a "100% browser width/height" mode (i.e. not fullscreen, but filling up the entire browser display area).

Regular player: http://play.nimbushd.com/lfu53b5

Fullscreen version: http://play.nimbushd.com/lfu53b5/fullscreen

I have tried nearly every node in the DOM and set width/height to 100%, with margin: 0px, padding: 0px. Seems to work great in Firefox. Why, then, does IE display a vertical scrollbar with a little whitespace at the bottom?

Edit: Since this issue is fixed, the short explanation: A 100% height/width Silverlight control within an ASP.NET <form> tag spills over just a bit in IE because of the form tag.

Answer 1

This behavior is caused by inline elements within the <form> - inline elements always render a line-height worth of pixels. Any of the following CSS rules will fix it:

form { font-size: 0; }

or

form * { display: block; }

Alternatively, you could try to get rid of all inline descendants of <form> (this includes text nodes) - but I'm not sure it would actually work (not tested). Plus it would render your markup hard to maintain (you'd need to strip all newlines and such... could be done during deployment, but I think this is taking it too far).

Answer 2

You need this this styling in you html:

<style type="text/css">
html, body {
    height: 100%;
    overflow: hidden;
}
body {margin: 0px}
</style>

Note that this applies a style to both html and body to enforce the height of html element to the viewport height and therefore also the body.