CSS/DIV question

Question

J'ai un en-tête que je veux coller au sommet et un pied de page que je veux coller au fond, et un contrôle silverlight que je veux occuper autant entre les deux que possible, sans déborder sur le pied de page (ou en-tête). Il travaille surtout si je fais:

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

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

La seule question que j'ai est quand il y a une faible résolution, comme 1024x768, dans ce cas, le pied de page se partiellement couvert par le contrôle de silverlight. Toute suggestion sur la façon de spécifier la hauteur du contrôle Silverlight, par rapport à l'en-tête et au pied de page? Effectivement, "height: < 100%> - HeaderHeight - FooterHeight>;"

Answer 1

Il n'y a aucun moyen de le faire en utilisant du CSS pur. Utiliser JavaScript, qui met à jour lorsque l'écran est redimensionné:

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"; 
} 

Answer 2

Une possibilité, si vous savez exactement quelle hauteur l'en-tête et le pied de page vont être, est d'utiliser top: (la hauteur de l'en-tête) px; en bas: (hauteur du pied de page) px; hauteur: auto;