Доброго вечера всем.
Изучаю веб, смотрю на разные способы организации содержимого сайта. В том числе проблему прилипания футера к основанию экрана. Из наиболее разрекламированных способов - использования свойства display:table с внушительным слоем оберток, которым назначается display:table-row и table-cell.
Оно работает, но выглядит громоздко и недостаточно наглядно, так что я попробовал сделать альтернативу. Принцип работы - вводим оберточный div для основного контента, затем создаем скрипт, который вешает на загрузку и смену размеров страницы обработчик, запрашивающий высоту экрана, заголовка и футера, и на их основе считающий высоту блока для контента.
Собственно, код скрипта
function adjustHeight()
{
var hHead = parseInt(getComputedStyle(document.querySelector('header')).height);
var hFoot = parseInt(getComputedStyle(document.querySelector('footer')).height);
var HX = (window.outerHeight - hHead - hFoot) + 'px';
var root = document.querySelector('.mainWrapper');
var contentNode = root.firstChild;
var noElements = true;
while(contentNode){
if(contentNode.nodeType == Node.ELEMENT_NODE){
contentNode.style.minHeight = HX;
noElements = false;
}
contentNode = contentNode.nextSibling;
}
root.style.minHeight = noElements ? HX : 'auto';
}
window.onload = window.onresize = adjustHeight;
А теперь вопрос - насколько допустимо такое решение, поскольку его не поддерживают древние браузеры + оно не сработает у людей, отключивших js ?
P.S.
Сожалею, отступы в форматировании скрипта развалились
