JobHub.ru — система автоматизации и управления бизнесом

Резиновая высота блока с учетом вычета высоты header и footer [css, jquery]

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

Схематично дизайн можно изобразить следующим способом:

100% высота у блока за вычетом шапки и подвала

Без использования 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. Если менять высоту окна браузера, то мгновенных изменений не происходит, высота подстраивается только после перезагрузки страницы.


Комментарии

Alexander
|
8 Ноябрь 2011 в 12:25

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

ОтветитьОтветить
|
8 Ноябрь 2011 в 21:23

@Alexander:
пробовал, чет не але

ОтветитьОтветить

Оставить комментарий

Разрешенные теги: a (href, title), b, i, strike.


Ваше имя *

E-mail (не публикуется) *

Адрес блога

Комментарий *