Резиновая высота блока с учетом вычета высоты header и footer [css, jquery]
При верстке одного макета мне попалась довольно интересная задача. Контентная часть должна тянуться по высоте, футер должен быть прижат к низу (у него неизвестная высота, т.к. в нем находятся ключевые слова), да еще плюсом из-за специфики дизайна шапка должна наследовать фон у body.
Схематично дизайн можно изобразить следующим способом:

Без использования js у меня в голове не родилось ни одной идеи.
Итак, какие данные мне были известны?
1. Высота шапки (135 пикселей) [header]
2. Размер отступа сверху и снизу у контентной области [container, padding-top:10px]
3. Высота отступа от макета снизу [10px]
Из неизвестных данных остается только высота подвала [footer]
Для решения этой задачи за основу я взял всегда используемый мной метод прижатия подвала и добавил к нему скриптов.
Первый этап – разметка:
<div class="header">
some content
</div>
<div class="container">
some content
<div class="empty"></div>
</div>
<div class="footer">
some content
</div>
Высота слоя empty должна быть такой же как и у слоя footer.
Теперь прописываем стили:
.header {
height:135px;
position:relative;
z-index:1;
}
.container {
background:#fff;
padding:10px 12px 0; /* в моем случае отступа снизу не надо было */
position:relative;
z-index:2;
}
.footer {
background:#433a36;
position:relative;
z-index:3;
}
И наконец самая главная часть – скрипты:
$(function() {
$('.container').append('<div class="empty"></div>'); // я вынес из разметки слой и сделал его добавление через js, чтобы в случае отключенных в браузере скриптов слой footer не наползал на контентную часть
var footerHeight = $('.footer').height(); // узнаем высоту слоя footer
var contHeight = $(document).height() - '155'; // узнаем высоту основного слоя; 100% минус высота шапки, минус высота отступа снизу макета. Т.е. 100%-(135px+10px+10px)
$('.container').css({'height':contHeight}); // прописываем полученную высоту основного слоя
$('.empty').css({'height':footerHeight}); // прописываем высоту распорки empty
$('.footer').css({'margin-top':-footerHeight}); // сдвигаем слой footer наверх на число равной его высоте и соответственно высоте распорки empty
})
После этого необходимо удалить из разметки слой empty, т.к. он только что был добавлен через js.
Посмотреть демо
Минусы использования данного метода:
1. С отключенным js высота блока не растягивается
2. Если менять высоту окна браузера, то мгновенных изменений не происходит, высота подстраивается только после перезагрузки страницы.
Tweet


Комментарии
По поводу минуса п2. Как решение можно повесить событие на resize Вашу функцию.
@Alexander:
пробовал, чет не але