Распечатать этот пост

Кроссбраузерное позиционирование футера

Как расположить футер, чтобы он всегда находился внизу, даже тогда, когда содержимое не занимает всю страницу? Для этого, контенту нужно задать высоту 100%. Но, не все так просто, пока ИЕ6 присутствует в статистике.

Предлагается кроссбраузерное решение. В CSS нужно написать следующее:

body, html {
	/* это обязательно, иначе футер внизу не будет */
	height: 100%;
}

#content {
	/* для всех нормальных браузеров */
	min-height: 100%;
	/* для всех нормальных браузеров */
	height: auto !important;
	/* это для ИЕ6, вместо min-height */
	height: 100%;
	/* отступ для футера */
	margin-bottom: -7em;
}

#footer {
	height: 7em;
}

Но все же, при наличии ИЕ7, существует одна проблема. При увеличении высоты окна браузера, под футером образовывается пустота, которая сразу же исчезнет если изменить ширину окна браузера.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (8 голосов, в среднем: 4,63 из 5)
Загрузка...

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