♛ FORTRESS-DESIGN

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

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

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

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

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


Перейти к верхней панели