Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Html футер: Тег | htmlbook.ru

On

Html футер: Тег | htmlbook.ru

By alexxlab

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

Тег <footer> (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.

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

<body>
	<h2>Важный заголовок</h2> 
	<article> <!-- начало первой статьи -->
		<h3>Статья о бытие</h3> 
		<p>Информация про бытие...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article><!-- конец первой статьи -->
	<article> <!-- начало второй статьи -->
		<h3>Статья о бытие 2</h3> 
		<p>Информация про бытие 2...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article> <!-- конец второй статьи -->
	<footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта -->
		<address>Контактные данные автора сайта</address>
	</footer>
</body>

Пример размещения тега <footer> на странице.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

Поддержка браузерами

Пример использования

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не
является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5.

Значение CSS по умолчанию

footer {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

HTML тег

Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.

В пределах одной страницы можно разместить несколько тегов <footer>. К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).

В нем могут содержаться другие HTML элементы, кроме тегов <footer> и <header>.

Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.

Если в нижнем колонтитуле содержится контактная информация, то ее необходимо размещать в теге <address>.

Синтаксис¶

Содержимое тега пишется между открывающим (<footer>) и закрывающим (</footer>) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div>Заголовок / Меню</div>
    <div>
      <h2>Основной контент</h2>
      <p>Это какой-то параграф. </p>
    </div>
    <footer>
      <p>Компания © W3docs. Все права защищены.</p>
    </footer>
  </body>
</html>

Попробуйте сами!

Результат¶

Атрибуты¶

Тег <footer> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <footer> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <footer>:

Цвет текста внутри тега <footer>:

Стили форматирования текста для тега <footer>:

Другие свойства для тега <footer>:

| HTML | WebReference

Элемент <footer> (от англ. footer — нижний колонтитул, подвал) задаёт «подвал» сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

<footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header>.

Внутри <footer> не должно быть элемента <main>.

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>footer</title>
</head>
<body>
<header>
<h2>Персональный сайт Кристины Ветровой</h2>
</header>
<article>
<h3>Добро пожаловать!</h3>
<p>Рада приветствовать вас на своем сайте.</p>
</article>
<footer>
Copyright Кристина Ветрова
</footer>
</body>
</html>

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

Рис. 1. Подвал сайта

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

и | Учебные курсы

Элементы <header> и <footer> предназначены для добавления «шапки» и «подвала» веб-страницы или раздела. Соответственно, это вступительный и заключительный элементы веб-страницы.

Элемент <header>

Шапка сайта представляет собой раздел, с которого начинается сайт, как правило, он содержит логотип, название сайта, форму поиска по сайту и др. В примере 1 показано использование <header> для сайта целиком.

Пример 1. Шапка сайта

<!DOCTYPE html>
<html>
<head>
<title>header</title>
<meta charset=»utf-8″>
</head>
<body>
<header>
<img src=»/example/image/logo.png» alt=»Логотип»
>
<h2>Добро пожаловать на сайт</h2>
</header>
<main>
Основное содержимое
</main>
</body>
</html>

Каждый раздел, созданный через <article>, <aside>, <nav>, <section>, также может содержать <header>. В этом случае элемент <header> уже будет задавать шапку раздела, а не сайта. Внутрь <header> можно добавить заголовок раздела с помощью элементов <h3>, <h4> и далее, а также другие элементы, вроде поисковой формы, оглавления, картинки. В примере 2 показано использование <header> для раздела. Заметьте, шапку из предыдущего примера мы сохранили, поскольку шапка сайта и шапка раздела могут сосуществовать вместе.

Пример 2. Шапка раздела

<!DOCTYPE html>
<html>
<head>
<title>header</title>
<meta charset=»utf-8″>
</head>
<body>
<header>
<img src=»/example/image/logo.png» alt=»Логотип»
>
<h2>Добро пожаловать на сайт</h2>
</header>
<section>
<header>
<h3>Новости</h3>
<p><input type=»search»
placeholder=»Поиск новостей»></p>
</header>
<p>Содержимое раздела</p>
</section>
</body>
</html>

Для <header> есть определённые ограничения — элемент нельзя вкладывать внутрь другого <header>, а также внутрь <address> и <footer>. Внутри <header> не должно быть элемента <main>.

Если <header> содержит единственный заголовок, то обычно нет смысла использовать <header>, заголовок в раздел можно вставлять напрямую.

Элемент <footer>

Элемент <footer> задаёт подвал сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Чтобы определить подвал для сайта, <footer> размещают внутри <body>, подобно элементу <header>, как показано в примере 3.

Пример 3. Подвал сайта

<!DOCTYPE html>
<html>
<head>
<title>footer</title>
<meta charset=»utf-8″>
</head>
<body>
<footer>
<p>Copyright © <time datetime=»2018″>2018</time>
Black Mesa Research Facility</p>
<address>New Mexico, USA.</address>
</footer>
</body>
</html>

Здесь внутри <footer> вставлен адрес компании с помощью элемента <address> и копирайт. Год можно выделить особо с помощью элемента <time> с атрибутом datetime. В браузере год при этом никак не будет отличаться от обычного текста, разметка предназначена для поисковых систем.

Учтите, что элемент <footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header>. Внутри <footer> не должно быть элемента <main>.

Кроме того, мы можем вставить <footer> внутрь статьи, чтобы показать дату её публикации (пример 4).

Пример 4. Подвал статьи

<!DOCTYPE html>
<html>
<head>
<title>footer</title>
<meta charset=»utf-8″>
</head>
<body>
<article>
<header>
<h2>О влиянии металлических инструментов
на инопланетные организмы</h2>
<p>Автор: Гордон Фримен</p>
</header>
<footer>
<p>Опубликовано
<time datetime=»2018-11-27″>27 ноября 2018</time></p>
</footer>
</article>
</body>
</html>

В данном примере внутри <article> используется элемент <header> для заголовка статьи и имени автора, а внизу добавлен элемент <footer> для даты публикации.

Html #footer не появляется — CodeRoad

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

          #footer
      {
        background-color: black;
        height: 40px;
        width: 100%;
        color: white;
        padding: 20px;
      }

      p
      {
      margin-bottom: 20px;
      }

   </style>
   <body>

       </div>
      </div>
     <div = id "footer">
     <div class = "container">Copyright Notice</div>
     </div>

Да, я вырезал часть, которая не была нужна, и это заставило вопрос выглядеть действительно странно, извините за мой grammar, английский не мой родной язык.

html

footer

Поделиться

Источник


Varga    

11 апреля 2015 в 15:37

2 ответа

  • «Stray start tag footer» в валидаторе html?

    Я не могу понять, почему я получаю эту ошибку: Бродячие начало тега footer. Это код (я вынул содержимое, это просто теги) <!doctype html> <head> <title>title</title> <meta charset=UTF-8> <meta name=keywords content=> <meta name=description content=>…

  • #footer фон сплошной цвет не работает над контейнером

    http://preview.goodinkproductions.com/CG8F13 Мне удалось заставить нижний колонтитул охватывать сайт (в отличие от тела, которое находится внутри контейнера и AOK). Но я не могу сделать фон нижнего колонтитула сплошным. Похоже, что у меня есть полоса сплошного цвета ниже, но содержимое нижнего…


1

У вас есть синтаксическая ошибка в HTML. Должно быть:

<div>

вместо

<div = id "footer">

Поделиться


pavel    

11 апреля 2015 в 15:38


0

Я предполагаю, что код HTML, который вы вставили, является неполным, так как он начинается с закрытия двух тегов div .

Отбросив две первые строки, вот как должен выглядеть ваш код:

<div>
    <div>Copyright Notice</div>
</div>

Обратите внимание, что на первом div у вас был = до id . HTML теги состоят из имени тега и необязательных свойств, разделенных пробелами, и их соответствующих значений, как в этом примере:

<tagname property1="value1" property2="value2>Content</tagname>

Наличие пробелов вокруг = не нарушит ваш код в большинстве ситуаций, но это не очень хорошая практика.

Поделиться


rev087    

11 апреля 2015 в 15:51

Похожие вопросы:

Почему веб-разработчики перестали использовать элемент <footer> html?

Я заметил, что многие сайты в наши дни не включают элемент footer . Как правило, вы ожидаете увидеть что-то вроде: <html> <head> </head> <body> </body> <footer>…

Мой «footer» не появляется в нижней части страницы, если страница?

Привет, я делаю базовый макет a, и у меня есть проблема с моим css. У меня есть набор тегов нижнего колонтитула, но он не появляется внизу, а появляется в середине страницы. Вот мой код CSS Мой…

Содержимое кадра не появляется в Firefox

Этот простой набор кадров не работает в Firefox (IE7, 8, Chrome в порядке). main не появляется, но footer появляется. В верхней части экрана есть разделитель окна рамки, но даже после того, как он…

«Stray start tag footer» в валидаторе html?

Я не могу понять, почему я получаю эту ошибку: Бродячие начало тега footer. Это код (я вынул содержимое, это просто теги) <!doctype html> <head> <title>title</title> <meta…

#footer фон сплошной цвет не работает над контейнером

http://preview.goodinkproductions.com/CG8F13 Мне удалось заставить нижний колонтитул охватывать сайт (в отличие от тела, которое находится внутри контейнера и AOK). Но я не могу сделать фон нижнего…

Html 5 <footer> vs <div> поисковые роботы глупость

Мой коллега, который работает со мной и отвечает за SEO на страницах, немного заставляет меня использовать <div id=footer> вместо нового <footer> , потому что роботы saarch якобы лучше…

Laravel Snappy-footer не наследует стили

Я использую следующую библиотеку для генерации PDFs из моих представлений. Теперь я пытаюсь сделать пользовательский нижний колонтитул, поэтому я создал представление нижнего колонтитула со…

Itext7 html2pdf footer CSS не работает

Я не могу видеть нижний колонтитул в результирующем PDF ниже HTML и CSS. Этот код отлично работает с IText версии 2 . Изменился ли способ отображения верхнего и нижнего колонтитулов в IText версии 7…

Бегущий нижний колонтитул «element(footer)» в paged media появляется только на последней странице

Я работаю над страницей css с бегущими нижними колонтитулами внутри полей полей. Все работало почти так, как ожидалось, пока графический дизайнер не попросил меня сделать часть нижнего колонтитула…

Нижний колонтитул’ не экспортируется из ‘./components/footer/Footer’

Когда запуск команды npm start возвращает приведенную ниже ошибку, я импортирую файл /components/footer/Footer.js в файл /src/index.js //ERRO Failed to compile. ./src/components/register/Register.js…

DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта

Обновлено 9 января 2021 Автор: Дмитрий Петров

  1. Какие проблемы возникли с нашим макетом сайта
  2. Как прижать футер к низу макета сайта
  3. Вставляем распорку и боремся с Internet Explorer

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

  1. Основы блочной верстки
  2. Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
  3. Создаем двухколоночный, трехколоночный и резиновый макеты для сайта

Какие проблемы возникли с нашим макетом сайта

Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом. Чаще всего такая ситуация возникает при просмотре его на больших мониторах (с высоким разрешением) и при отображении страницы с малым количеством информации.

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

Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div>Подвал</div>
</div>
 </body>
</html>

А в файле Style.css были прописаны следующие CSS свойства:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

Ну, а сам макет выглядел примерно так:

Как прижать футер к низу макета сайта

Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

body, html {
margin:0px;
padding:0px;
height: 100%;
}

На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.

Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
}

Еще я хочу его подсветить (div с). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
border: solid 3px black;
}

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>

<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое </div>
</div>
<div>Подвал</div>
 </body>
</html>

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).

Но для того, чтобы задать отрицательный отступ от верха, нужно знать эту самую высоту footer, а мы ее пока что не знаем.

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
}

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
}

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

Вставляем распорку и боремся с Internet Explorer

Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:

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

Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div>
<div></div>
</div>
<div>Подвал</div>
 </body>
</html>

А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka {
height: 50px;
}

В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.

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

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

#footer{
background-color:#FFC0FF;
clear:both;
height: 20px;
margin-top:-20px;
width:800px;
margin-left: auto;
margin-right: auto;
}

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

* html #maket {
height: 100%;
}

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}

Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:



Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Как прижать footer к низу окна браузера с помощью CSS.

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.

Как избежать этой ситуации? Как прижать footer к низу окна браузера?

В этой заметке хочу поделиться своим опытом в решении этого вопроса.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Итак, имеем следующий HTML-код:

<html>
<head>
 <title>Заголовок страницы</title>
</head>
<body>
<div>
  <p>Содержимое header</p> 
</div>
<div>
 <h2>Заголовок.</h2>
 <p>Пример текста документа</p>
</div>
<div>
 <p>Место copyright.</p>
</div>
</body>
</html>

Теперь посмотрите на код CSS, который позволит решить проблему и прижать footer к низу окна браузера.

* {
margin:0;
}
body {
 height: 100%;
 min-width:900px;
}
html { 
 position:relative; 
 min-height:100%;
}
#container {
 padding-bottom: 100px;/*Примерно 2 размера footer, чтобы он не наезжал на контент при узком окне браузера*/ 
}
#footer {
 height: 50px; 
 background: #f7f7f7;
 position: absolute;
 bottom: 0;
 width: 100%;
}

В общем, теперь страница выглядит вот так:

Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.

Для элемента body обязательно нужно задать высоту 100%.

Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы

position: absolute;
bottom: 0;

он встанет как раз в то место, где заканчивается 100% высоты элемента body.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Тег нижнего колонтитула HTML

Пример

Нижний колонтитул в документе: