Статьи

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

Опубликовано: 01.09.2018

Как расположить футер, чтобы он всегда находился внизу, даже тогда, когда содержимое не занимает всю страницу? Для этого, контенту нужно задать высоту 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, существует одна проблема. При увеличении высоты окна браузера, под футером образовывается пустота, которая сразу же исчезнет если изменить ширину окна браузера.

Понравилась статья? Поделиться с друзьями:

2011.11.19
Карта
rss