IP адрес:  54.221.73.186

Версия протокола:  HTTP/1.0

Локальный порт:  48726

Количество кук:  0



Вебмастеру

HTML и World Wide Web

Правила языка html

Структура html-документа

Стандартные шрифты для сайта

Коды символов html

Коды цветов html

Размеры баннеров

HTML5

Отобразить <html> код на Web-странице

Вставить Flash на Web-страницу

Анимированная иконка favicon.ico

Ошибка валидатора: The name attribute is obsolete. Consider putting an id...

CSS3

Атрибут "noshade" с помощью CSS

HTML5, CSS3

Вертикальная линия html

Footer внизу страницы

JavaScript 2.0 (ECMAScript 3.1)

Ротатор баннеров

Meta теги

Атрибут meta charset

Атрибут meta http-equiv

Атрибут meta name

Apache2

Поддомен VirtualHost

Joomla 3.x

Вывести текст в позицию шаблона

Разрешить регистрацию пользователей

Убрать "/ru" в имени домена

Вывод габаритных размеров и веса в карточке товара

Убрать строку "Leave the search box empty to find all products, or enter...

Как убрать из <title> VirtueMart надпись "Добро пожаловать в"

Ошибка vmError: Предупреждение, Безопасный путь пустое это...

Предупреждение. Отсутствует флаг ru-RU для языка ru-RU. Пройдите в...

Убрать тег link rel canonical

Вставить баннер в Joomla

Вставить видео YouTube в Joomla

Лента новостей в Joomla

Ускорение загрузки сайта

Убрать мета-тег "Generator"

Добавить позицию в шаблон

Для использования Joomla! на вашем сервере необходимо отключить...

Joomla 2.x

Секреты Joomla

Заменить favicon.ico

Изменить ошибку 404

RSS 2.0

Как создать RSS

Теги RSS


Навигация:   Главная  –  Вебмастеру  –  Footer внизу страницы




Footer внизу страницы

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

Для такого отображения материала Вам необходимо создать 2 дополнительных DIV. В первый поместить весь контент страницы, а во второй сам футер:

<body>
	<div id="all-content">
		<div class="content">Материал</div>
	</div>

	<div class="footer">Подвал сайта<div>
</body>

Не важно, какие атрибуты Вы будете использовать class или id для блоков.

Теперь создаем стили для блоков div и для тела документа.

html, body
	{
		/*сбрасываем браузер и задаем ему высоту в 100%*/
		margin: 0;
		padding: 0;
		height: 100%;
	}
#all-content
	{
		/*задаем минимальную высоту контента - 100%*/
		min-height: 100%;
	}
.content
	{
		/*Контент, для которого делаем отступ на высоту футера.*/
		padding-bottom: 50px; /*Высота футера, см. ниже.*/
	}
.footer
	{
		height: 50px; /*высота футера*/
		margin-top: -50px; /*Отступ футера, см. ниже*/
	}

Отступ padding-bottom: 50px; для контента, а так же отступ margin-top: -50px; мы делаем на случай, если контент материала велик. Если не дать эти отступы, то футер "наползет" на материал высотой в 50 пикселей.