CSS/DIV question

Question

I have a header that I want to stick to the top and a footer I want to stick to the bottom, and a silverlight control that I want to occupy as much of in between as possible, without overflowing onto the footer (or header). It mostly works if I do:

div#silverlightControlHost 
{
  float:left;
  height: 80%;
  width: 100%;
}

div#footer
{
  position: absolute; 
  bottom: 0px;
  width: 100%;
  left: 0px;
}

The only issue I have is when there is a low resolution, like 1024x768, in which case the footer gets partially covered by the silverlight control. Any suggestion on how to specify the height of the silverlight control, relative to the header and footer? Effectively, "height: <100%> - HeaderHeight - FooterHeight>;"

Answer 1

One possibility, if you know exactly what height the header and footer are going to be, is to use top:(the height of the header)px; bottom:(height of the footer)px; height:auto;

Answer 2

There is no way to do this using pure CSS. Use JavaScript which updates when the screen is resized:

window.onresize = function ()
{
    var silverlight,headerHeight,footerHeight,windowHeight;

    if (typeof(window.innerHeight) != 'undefined')
        windowHeight = window.innerHeight;
    else
        windowHeight = document.body.offsetHeight;

    silverlight = document.getElementById('silverlightControlHost');
    headerHeight= parseInt(document.getElementById('header').style.height,10);
    footerHeight= parseInt(document.getElementById('footer').style.height,10);
    silverlight.style.height = (windowHeight - headerHeight - footerHeight) + "px";
}