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 the "100% width / height of the browser" mode (i.e. not in full screen mode, but filling the entire browser display area).

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

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

I tried almost every node in the DOM and set the width / height to 100%, with field: 0px, padding: 0px. Seems to work fine in Firefox. Why then does IE show a vertical scrollbar with a small space below?

Edit:. Since this problem has been fixed, a brief explanation: the Silverlight color control at 100% in the ASP.NET <form> only spills in IE due to form .

Answer 1

This behavior is caused by inline elements inside the <form> - inline elements always display line-height pixel values. Any of the following CSS rules will fix this:

 form { font-size: 0; } 

or

 form * { display: block; } 

Alternatively, you can try to get rid of all the built-in descendants of <form> (including text nodes), but I'm not sure if this will actually work (not verified). Also, this would greatly improve your markup (you would need to delete all new lines, etc ... could do during deployment, but I think it is too far).

Answer 2

You need this style in html:

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

Note that this applies the style to both html and body to ensure that the html element is as tall as the viewport as well as the body.