Вопрос CSS/DIV

Question

У меня есть заголовок, который я хочу придерживаться в верхней части и нижнем колонтитуле, который я хочу придерживать в нижней части, и элемент управления silverlight, который я хочу занять как можно больше, без переполнения нижний колонтитул (или заголовок). В основном это работает, если я:

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

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

Единственная проблема у меня есть, когда есть низкое разрешение, как 1024x768, в этом случае сноска получает частично покрывается контролем SilverLight. Любое предложение о том, как указать высоту элемента управления silverlight относительно верхнего и нижнего колонтитула? Фактически, «высота: < 100%> - HeaderHeight - FooterHeight>;"

Answer 1

Невозможно сделать это, используя чистый CSS. Использование JavaScript, который обновляет, когда экран изменяется:

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

Одна из возможностей, если вы точно знаете, какой высоты будет верхний и нижний колонтитулы, - использовать верх: (высота заголовка) px; снизу: (высота нижнего колонтитула) px; высота: авто;