ansaurus

Question

Answer 1

+2 A:

You should be able to still use your CSS to do this. Just make your header DIV the size you want and then the container DIV for the Silverlight element be 100%/100%

Tim Heuer 2008-12-03 21:42:17

I've tried that, but the 100% height seems to mean 100% of the containing element's height, not 100% of the containing element's height minus the header div. So the end result is a vertical scroll bar because the Silverlight control is too big by precisely the header div height.

C. Dragon 76 2008-12-03 21:58:53

If I misunderstood your suggestion and you're able to make this work, could you please provide a quick example?

C. Dragon 76 2008-12-03 21:59:44

Answer 2

+2 A:

Here's a solution in JavaScript. First, you create this function:

<script type="text/javascript">
    function resizeSLHost()
    {
        var docHeight = document.body.offsetHeight;
        var pluginHeight = docHeight - 130;
        var slplugin = document.getElementById("silverlightControlHost");
        slplugin.style.height = pluginHeight + "px";
    }
</script>

Then, in your opening body tag, you say:

<body onload="resizeSLHost()" onresize="resizeSLHost()">

And you place your header div right before the Silverlight host div:

<div id="header" style="height:130px"></div>
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2" type="application/x-silverlight-2" width="100%" height="100%">
        // the usual stuff here...
    </object>
    <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>

Of course, the number you subtract from docHeight in resizeSLHost() must be equal to the height of the header div.

That worked for me in IE 7 and Firefox 3.0.4.

Boyan 2008-12-04 06:01:44

ansaurus

tags:

views:

answers:

How to "dock" a Silverlight control

related questions