Как сделать чтобы внизу

Закрыть ... [X]

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

Для этого воспользуемся свойством position и его значением fixed. При этом элемент остается на одном месте, а его положение задается координатами через свойства top, right, bottom, left. В нашем случае достаточно задать нулевые значения у left и bottom. Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).

Пример 1. Фиксированный подвал

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фиксированный подвал</title> <style type="text/css"> #content { width: 500px; / Ширина слоя / margin: 0 auto 50px; / Выравнивание по центру / } #footer { position: fixed; / Фиксированное положение / left: 0; bottom: 0; / Левый нижний угол / padding: 10px; / Поля вокруг текста / background: #39b54a; / Цвет фона / color: #fff; / Цвет текста / width: 100%; / Ширина слоя / } </style> </head> <body> <div id="content"> Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантирует вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное! </div> <div id="footer"> &copy; Влад Мержевич </div> </body> </html>

Результат примера показан на рис. 1.

Подвал внизу страницы

Рис. 1. Подвал внизу страницы

Браузер Internet Explorer 6 не поддерживает значение fixed, поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами <div>, вложив их внутрь контейнеров content и footer, а также включить еще один стиль специально для этого браузера (пример 2).

Пример 2. Код с учетом IE6

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фиксированный подвал</title> <style type="text/css"> body { margin: 0; / Убираем отступы на странице / } #content { width: 500px; / Ширина слоя / margin: 0 auto 50px; / Выравнивание по центру / } #footer { position: fixed; / Фиксированное положение / left: 0; bottom: 0; / Левый нижний угол / color: #fff; / Цвет текста / width: 100%; / Ширина слоя / } #footer div { padding: 10px; / Поля вокруг текста / background: #39b54a; / Цвет фона / } </style> <!--[if lte IE 6]> <style type="text/css"> html, body, #container { height: 100%; / Высота страницы / overflow: hidden; / Обрезаем все, что не помещается в окно / } #container { overflow: auto; / Добавляем полосы прокрутки / } #footer { position: absolute; / Абсолютное позиционирование / } #footer div { margin-right: 17px; / Смещаем фон, чтобы не накладывался на скролбар / } </style> <![endif]--> </head> <body> <div id="container"> <div id="content"> Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантируют вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное! </div> </div> <div id="footer"> <div> &copy; Влад Мержевич </div> </div> </body> </html>

В данном примере используется значение absolute свойства position. При абсолютном позиционировании элемент можно поместить в любое место окна браузера, но при этом он прокручивается вместе с содержимым. В этом основное различие между значениями fixed и absolute. Чтобы подвал не перемещался, задается высота страницы как 100% и отсекается все, что не помещается в текущие размеры окна. При этом пропадает вертикальная полоса прокрутки, ее следует добавить к content с помощью overflow.

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


Источник: http://htmlbook.ru/layout/fiksirovannyy-podval


Поделись с друзьями



Рекомендуем посмотреть ещё:



Ответы : Как сделать чтобы панель задач опять была внизу Абсент как его сделать


Как сделать чтобы внизу Как сделать чтобы внизу Как сделать чтобы внизу Как сделать чтобы внизу Как сделать чтобы внизу Как сделать чтобы внизу Как сделать чтобы внизу Как сделать чтобы внизу

ШОКИРУЮЩИЕ НОВОСТИ