Silverlight to resize to 100% with IE8

Had a frustrating time getting a Silverlight control to take up 100% height of the browser page. First off, this is nothing really to do with Silverlight and all about the div it’s contained in. In IE7 having the div at 100% worked fine, but in IE8 it was tiny. The problem is that in IE7 a div at 100% means, ‘please take up 100% of the available height’. Whereas in IE8 it’s, ‘please take up 100% of your parent’. So a structure like

html->body->div->div[100%]->Silverlight Control
means that in IE8 its height is basically nothing. So I added 100% to the parents up to body and still no joy. Then Hannah at Clear Breeze Design pointed out that I needed to apply it to the html tag too. That did the trick. So if you have a very simple layout you could do something like;

 html * {height 100%}

Even in my code that’s too simple but the basic take-away is that you need to follow the ancestors from the Silverlight control up until you hit a height, that’s the one it will take. If you want it to be 100% then must ensure that everyone on that chain is 100% too, including body and html.

One thought on “Silverlight to resize to 100% with IE8

  1. Bart September 15, 2010 / 11:33 am

    There is another trick to use on websites. To eliminate most of the cross browser differences use a reset.css which defines html[height=100%] and other differences like form[margin/padding=0px]. Set this file as the first css to load in your webpage and most of your headache and hair pulling will be gone.

    reset.css search on Google

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s