Привязка футера (подвала) к низу страницы при блочной верстке
Привязка футера (подвала) к низу страницы при блочной верстке
При блочной верстке часто бывает необходимо «прижать» подвал сайта к низу страницы, независимо от количества основного контента страницы. Для этого есть простой выход, без применения javascript, используя один CSS. Способ тестировался с включенным доктайпом, и возможно не будет работать, как ожидалось, если его убрать. Но это так, к слову.
Итак, сперва выставляем для элементов html и body высоту 100%. Это единственные элементы, на которые можно выставить высоту в процентах или любых других значениях, и при этом она будет «растягиваться» дальше, если контент превысит указанное значение.
Это понадобиться для того, чтобы внутри body мы смогли создать элемент со значением min-height, указанный в процентах (если родительский элемент имеет значение height:auto, то минимальную высоту задать в процентах не удасться или это будет работать не во всех браузерах).
Так как, Internet Explorer 6 и более ранние версии не поддерживают свойства CSS min-height, мы просто воспользуемся значением высоты height. И это не значит, что контент будет «вылазить» за пределы нашего элемента, если превысит его высоту.
Эта хитрость работает для IE 6 практически также, как и min-height, из-за того факта, что IE как раз «растягивает» блок, если контент выходит за пределы указанной высоты (ширины). На сколько я помню, это кажется, из-за другой блочной модели, которую придумали Microsoft при разработке этого браузера (да, оказывается есть и положительные эпитеты в этом богомерзком IE 6).
Выставляя значение минимальной высоты в 100% для блока с контентом, мы, тем самым, будем «придавливать» подвал сайта в самый низ страницы. Но для того, чтобы не возникало полосы прокрутки, придется сам подвал приподнять вверх на его высоту, при помощи отрицательного значения margin-top.
А чтобы контент страницы не «уходил» под наш подвал, нужно сделать отступ снизу (padding-bottom), равный высоте футера + отступ от футера, на тот элемент (в примере ниже — div.text), который будет содержать весь контент страницы.
Взглянем теперь на то, что получилось в итоге:
<style type="text/css">
html, body { height:100%; }
div.main { position:relative; min-height:100%; -height:100%; color:gray; background:#f1f1f1; }
div.main .text { position:relative; display:block; padding:15px; color:#666; padding-bottom:65px; /* высота футера + отступ */ }
div.footer { position:relative; min-height:50px; -height:50px; margin-top:-50px; line-height:50px; padding:0 15px; background:white; }
</style>
<div class="main">
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
<div class="footer">
Подвал сайта, всегда находящийся в самом низу страницы
</div>
Единственный минус такого подхода — высота подвала должна быть фиксированной. Иначе, если контент превысит высоту, у страницы появиться горизонтальная прокрутка, независимо сколько содержимого в основном блоке (main).
|
| Категория: Разное | Добавил: Admin (10.10.2010)
|
| Просмотров: 4547 | Рейтинг: 5.0/1
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
